less动态类名匹配

如果项目中有很多margin或者padding样式，并且值都不一样，那在less中定义公共的类名样式，再重复使用也很麻烦，这个时候写一个动态类名和动态的样式值就很好用。

less本身没有循环的语法，但是函数可以递归来调用，这样就可以模拟循环，用法如下。

.for(@i) when(@i <= 6) { //@i
    .for(@i + 1); //@i + 1 相当于"++i"
    .box@{i} {
        width:50px;
        height:50px;
    }
}
.for(1);
// less转为css
.box6 {
  width: 50px;
  height: 50px;
}
.box5 {
  width: 50px;
  height: 50px;
}
.box4 {
  width: 50px;
  height: 50px;
}
.box3 {
  width: 50px;
  height: 50px;
}
.box2 {
  width: 50px;
  height: 50px;
}
.box1 {
  width: 50px;
  height: 50px;
}

在项目中想做到mt20对应margin-top: 20px；

代码还需优化

@rem: 1/1px;
.for(@i) when (@i<=21) {
  @size: @i * 5;
  .for(@i + 1);
  .m@{size}{
      margin: @size/@rem;
    }
  .ml@{size}{
    margin-left: @size/@rem;
  }
  .mr@{size}{
    margin-right: @size/@rem;
  }
  .mt@{size}{
    margin-top: @size/@rem;
  }
  .mb@{size}{
    margin-bottom: @size/@rem;
  }

  .p@{size}{
    padding: @size/@rem;
  }
  .pl@{size}{
    padding-left: @size/@rem;
  }
  .pr@{size}{
    padding-right: @size/@rem;
  }
  .pt@{size}{
    padding-top: @size/@rem;
  }
  .pb@{size}{
    padding-bottom: @size/@rem;
  }
}
.for(1);

这样在写html代码的时候就可以直接用class写一些基本样式了。

scss的实现方式比less简单些，因为scss有循环语法。

scss循环有两种方式：（@for $i from 开始值 through） 结束值 和 （@for $i from 开始值 to 结束值）

通过 #{} 插值语句可以在选择器或属性名中使用变量。

这2种方式是相似的，唯一的区别是：方式1包括结束值，方式2不包括结束值。其中“开始值”和“结束值”都是正整数。

以下是实现方式：

$rem: 1/1px;

@for $i from 1 to 21 {
    $size: $i * 5;

    .m#{$size} {
        margin: $size/$rem;
    }
    .ml#{$size} {
        margin-left: $size/$rem;
    }
    .mr#{$size} {
        margin-right: $size/$rem;
    }
    .mt#{$size} {
        margin-top: $size/$rem;
    }
    .mb#{$size} {
        margin-bottom: $size/$rem;
    }

    .p#{$size} {
        padding: $size/$rem;
    }
    .pl#{$size} {
        padding-left: $size/$rem;
    }
    .pr#{$size} {
        padding-right: $size/$rem;
    }
    .pt#{$size} {
        padding-top: $size/$rem;
    }
    .pb#{$size} {
        padding-bottom: $size/$rem;
    }
}

个人感觉这样写比较方便。

快来关注这个公众号，里面有很多你想要的！