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

2020-11-24 22:59:51 阅读：281 来源： 互联网

标签：scss 混入 triangle less top mixins 图标

背景

我们在项目中，经常会用到三角图标，这个时候，你是使用 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 的混入功能，实现只需一行代码，就写出各种样式的三角图标及其任意的组合的代码，看完之后如果有什么疑问，欢迎留言讨论哦；如果觉得对你有帮助，也可以点个赞哦 (^ _ ^) 。

标签：scss,混入,triangle,less,top,mixins,图标
来源： https://blog.csdn.net/weixin_42212774/article/details/110099570

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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

背景

1. 使用 Less 混入实现

2. 使用 Scss 混入实现