less、scss混入实现一行代码写出三角形图标任意组合

---

背景

我们在项目中，经常会用到三角图标，这个时候，你是使用 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 文件了&#