background

We often use triangle ICONS in our projects. Do you use icon fonts or do you write your own CSS style code? Today we will take a look, how to use less or SCSS mixing function, achieve just one line of code, write a variety of styles of triangular ICONS and any combination of it. Without further ado, get straight to the picture above:

1. Use Less mixed implementation

When we write less, we usually write the mixins in a separate file, such as mixins.less:

// mixins.less
/* * @width: border-width * @config: border-width; * format: {top: #ff0000; right: #ffa500; bottom: #e41ad9; Left: #0000ff} * You can configure the value of config according to your needs */
.triangle(@width.@config) {
  display: inline-block;
  width: 0;
  height: 0;
  vertical-align: middle;
  border: @width solid transparent;
  each(@config, {
    border-@{key}-color: @value;
  });
}
Copy the code

And then we can in any need to write the triangle icon style file into mixins. Less documents, the introduction of mixins. Less, only need one line of code that can be achieved at any position, triangle icon and any combination of colors:

// index.less
// Import mixins.less according to the corresponding path
@import "./mixins.less";

// Then you can use it directly like the following. You can combine it according to your own needs.
// All you need to do is call less mixin, like calling a function.

// Add a red triangle icon style to the element of class triangle01:
.triangle01 {
  .triangle(15px, {top: red});
}

// Add a new orange and green triangle style to the element of class triangle02:
.triangle02 {
  .triangle(15px, {right: orange; bottom: green});
}

.triangle03 {
  .triangle(15px, {bottom: green; left: purple; top: blue; }); } .triangle04 {.triangle(15px, {top: #e41ad9; right: green; bottom: red; left: lightblue});
}
Copy the code

2. Scss mixed implementation

Again, we first write the mixin code to a separate file, such as mixins.scss:

// mixins.scss
/* * $width: $rest: $rest: $rest: $rest: $rest: $rest: $rest: $rest: $rest: $rest: $rest: $rest: $rest: $rest: $rest: $rest: $rest: $rest: $rest: $rest: $rest: $rest: $rest: $rest: $rest: $rest # 0000FF * You can configure the value of $rest */ according to your needs

@use "sass:meta"; // Don't forget this sentence

@mixin triangle($width.$rest...). {display: inline-block;
  width: 0;
  height: 0;
  vertical-align: middle;
  border: $width solid transparent;
  @each $key.$color in meta.keywords($rest) {
    border- # {$key} -color: $color; }}Copy the code

We can then introduce the mixins.scss file in any file that needs to write the triangle style:

// index.scss
// Introduce mixins.scss into the file
@import "./mixins.scss";

// Pass parameters to mixin as needed
// Add a red triangle icon style to the element of class triangle01:
.triangle01 {
  @include triangle(15px.$top: red);
}

// For class triangle02, add a new triangle style made up of blue and red triangles:
.triangle02 {
  @include triangle(15px.$left: blue, $top: red);
}

.triangle03 {
  @include triangle(15px.$bottom: green, $left: purple, $top: blue);
}

.triangle04 {
  @include triangle( 15px.$top: #e41ad9.$right: green, $bottom: red, $left: blue );
}
Copy the code

It should be noted that the above less and SCSS passed parameters into the mixed, the way of parameter passing is slightly different, we should pay attention to distinguish, do not write mixed.

Well, the above is the use of less or SCSS mixed function, to achieve just one line of code, write a variety of styles of triangle icon and any combination of all logic, after reading if there is any question, welcome to leave a message to discuss oh; If you think it will help you, you can also click “like”.