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)