Css 将SASS数学表达式转换为LESS
我在里面有生成CSS类的SASS代码,这很好。它有for循环和简单的数学表达式 我想把它转换成更少的,但我自己无法完成。请看下面的代码 我如何才能像SASS那样将其转换为更少的代码Css 将SASS数学表达式转换为LESS,css,for-loop,express,sass,less,Css,For Loop,Express,Sass,Less,我在里面有生成CSS类的SASS代码,这很好。它有for循环和简单的数学表达式 我想把它转换成更少的,但我自己无法完成。请看下面的代码 我如何才能像SASS那样将其转换为更少的代码 @for $i from 1 through (($point-count + 1) / 2) { &:nth-of-type(#{$i}) { transform: rotate(360deg / $point-count * ($i - 1)); } &:
@for $i from 1 through (($point-count + 1) / 2) {
&:nth-of-type(#{$i}) {
transform: rotate(360deg / $point-count * ($i - 1));
}
&:nth-of-type(#{$i + $point-count / 2}) {
transform: rotate(180deg + 360deg / $point-count * ($i - 1));
}
&:nth-of-type(#{$i}), &:nth-of-type(#{$i + $point-count / 2}) {
&:before {
animation-delay: - $spin-animation-time + ($spin-animation-time / $point-count * 2 * ($i - 1));
}
}
}
你能用更少的时间编写一个简单的代码吗?首先,管理循环外部变量的插值?
.loop(@i) when (@i < (@point-count + 1) / 2) {
.loop((@i + 1));
&:nth-of-type(@{i}) {
transform: rotate(360deg / @point-count * (@i - 1));
}
@index: @i + @point-count / 2;
&:nth-of-type(@{index}) {
transform: rotate(180deg + 360deg / @point-count * (@i - 1));
}
&:nth-of-type(@{i}),
&:nth-of-type(@{index}) {
&:before {
animation-delay: - @spin-animation-time + (@spin-animation-time / @point-count * 2 * (@i - 1));
}
}
}
.loop(1)