less与sass循环对比

直接将之前自己的问题复制过来的，主要是对比less和sass循环样式的用法哪个更好用。

.for(@num) when (@num <20){
    .width-((@num) * 5){
        width:(@num *5%);
    }
    .for((@num+1))
}
.for(1);

循环出来的结果是：

.width-(1*5) {
  width: 5%;
}
.width-(2*5) {
  width: 10%;
}

如何修改.width-((@num) * 5)这部分从而达到下面的效果呢？

.width-5 {
  width: 5%;
}
.width-10 {
  width: 10%;
}
.width-15 {
  width: 15%;
}

将基于@num计算出来的新值赋给一个新的变量@name,.width-@name这样调用就可以了。

.for(@num) when (@num <20){
    @name:(@num*5);
    .width@{name}{
        width:(@num *5%);
    }
    .for((@num+1))
}
.for(1);

不得不吐槽下less，单单循环这里真心不如sass好用.
下面放一个sass的写法：

@for $i from 1 through 10 {
  .width#{$i *5} { width:$i*5%; }
}

就这么简单，简洁易理解，#{$i *5}中$i可以直接和5进行计算，而不需要再加括号，而less中无论你采用下面哪种都不行

.width(@{num*5})
.width(@{num}*5)
.width(@num*5)
.width((@num)*5)
.width(@{num}*5)