less与sass循环对比

时间 2019-11-08

标签 sass 循环对比繁體版

原文原文链接

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

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

循环出来的结果是：less

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

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

.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)