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