Less is more 给CSS加点料

循环

.banner-btn(@n, @i: 1) when (@i =< @n) {
    .active .banner-txt button:nth-child(@{i}) {
        .animation(fadeInUp 0.35s @i*0.2s forwards);
    }
    .banner-btn(@n, (@i + 1));
}

// 定义颜色数组
@tagColor: #AF61F3, #F9942D, #1790FF, #14C2C2;
// 定义循环最大值，此处使用颜色数组的长度
@len: length(@tagColor);

each(range(@len), {
  .app-tag--@{index} {
    // 取颜色值
    color: extract(@tagColor,@index);
    background-color: rgba(extract(@tagColor,@index), 0.1);
    border-color: rgba(extract(@tagColor,@index), 0.15);
  }
});

混入

混合（Mixin）是一种将一组属性从一个规则集包含（或混入）到另一个规则集的方法

.clearfix {
  &:after {
    content: "";
    display: table;
    clear: both;
  }
}

.scrollBar {
  &::-webkit-scrollbar {
    width: 8px;
  }

  &::-webkit-scrollbar-thumb {
    background:rgba(144, 147, 153, 0.5);
    border-radius: 20px;
    &:hover{
      background: rgba(144, 147, 153, 0.8);
    }
  }
}

处理浏览器前缀

.pre(@style,@value){
    -webkit-@{style}: @value;
       -moz-@{style}: @value;
        -ms-@{style}: @value;
            @{style}: @value;
}
.animation(@value){
    .pre(animation,@value);
}
.transition(@arg){
    .pre(transition,@arg);
}
.transform(@arg){
    .pre(transform,@arg);
}
.border-radius(@arg){
    .pre(border-radius,@arg);
}
.vendor(@property, @value) {  
    -webkit-@{property}: @value;
     -khtml-@{property}: @value;
       -moz-@{property}: @value; 
            @{property}: @value;
}  
.vendor(@property, @value, @value2) {  
    -webkit-@{property}: @value, @value2;
     -khtml-@{property}: @value, @value2;
       -moz-@{property}: @value, @value2;
            @{property}: @value, @value2;
}  
.keyframes (@name, @frames) {  
    @-webkit-keyframes @name { @frames(); }
       @-moz-keyframes @name { @frames(); }
        @-ms-keyframes @name { @frames(); }
         @-o-keyframes @name { @frames(); }
            @keyframes @name { @frames(); }
} 
.border-radius (@radius: 5px) {  
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
    -ms-border-radius: @radius;
    border-radius: @radius;
} 
.boxshadow(@right_left:5px, @bottom_top:5px, @box:5px, @box_color:gray){  
   -webkit-box-shadow: @arguments;  
      -moz-box-shadow: @arguments;  
       -ms-box-shadow: @arguments;  
           box-shadow: @arguments;  
}

多行省略

.line-clamp-mixin(@value) {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: @value;
}