---

背景

我们在项目中，经常会用到三角图标，这个时候，你是使用 icon 字体呢，还是会自己写 css 样式代码呢？今天我们就一起来看看，如何使用 less 或者 scss 的混入功能，实现只需一行代码，就写出各种样式的三角图标及其任意的组合呢。话不多说，直接上图：

1. 使用 Less 混入实现

我们在写 less 的时候，一般都会把混入代码单独写入一个文件，比如mixins.less:

// mixins.less
/*
* @width：border宽度
* @config：三角形位置及颜色配置，
* 格式: {top: #ff0000; right: #ffa500; bottom: #e41ad9; left: #0000ff}
* 可根据自己的需要配置config的值
*/
.triangle(@width, @config) {
  display: inline-block;
  width: 0;
  height: 0;
  vertical-align: middle;
  border: @width solid transparent;
  each(@config, {
    border-@{key}-color: @value;
  });
}

然后我们就可以在任意需要写三角图标样式的文件中引入 mixins.less 文件了，引入 mixins.less 之后，只需要一行代码就可以实现任意位置、颜色的三角形图标及其任意组合了：

// index.less
// 根据对应路径引入mixins.less
@import "./mixins.less";

// 然后就可以像下面这样直接使用了， 你可根据自己的需要，随意组合，
// 所有的样式都只需要像类似于调用函数一样，调用一下less混入就行了：
.triangle01 {
  .triangle(15px, {top: red});
}

.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});
}

2. 使用 Scss 混入实现

同样的，我们先把混入代码单独写入一个文件，比如mixins.scss:

// mixins.scss
/*
* $width：border宽度
* $rest：剩余参数：三角形位置及颜色配置，
* 格式: top: #ff0000, right: #ffa500, bottom: #e41ad9, left: #0000ff
* 可根据自己的需要配置 $rest 的值
*/

@use "sass:meta"; // 注意这一句不要忘了

@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;
  }
}

然后我们就可以在任意需要写三角图标样式的文件中引入 mixins.scss 文件：

// index.scss
// 引入mixins.scss混入文件
@import "./mixins.scss";

// 根据自己需要传递参数给混入
.triangle01 {
  @include triangle(15px, $top: red);
}

.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 );
}

要注意，以上 less 和 scss 传入参数到混入的时候，传参方式有些细微的差别，要注意区分，不要写混了。

好了，以上就是使用 less 或者 scss 的混入功能，实现只需一行代码，就写出各种样式的三角图标及其任意的组合的代码，看完之后如果有什么疑问，欢迎留言讨论哦；如果觉得对你有帮助，也可以点个赞哦 (^ _ ^) 。