首页 > 使用less循环样式的时候class位置如何做计算?

使用less循环样式的时候class位置如何做计算?

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

fuck!

【热门文章】
【热门文章】