scss: 的for循环 注意有计算的部分,要用空格,不然报错
$n: 9;
$t:0.1s;
.share-dropown-menu-item {
@for $i from 1 through $n {
&:nth-of-type(#{$i}) {
z-index: -1;
transition-delay: $i*$t;
transform: translate3d(0, -60px, 0);
}
}
}
.share-dropown-menu-item {
@for $i from 1 through $n {
&:nth-of-type(#{$i}) {
z-index: -1;
transition-delay: ($n - $i)*$t;
transform: translate3d(0, ($i - 1)*60px, 0);
}
}
}
对应如下 less的loop循环 :注意有计算的部分,要用空格,不然报错
@n: 9;
@t: 0.1s;
.loop(@i) when (@i <= @n) {
&:nth-of-type(@{i}) {
z-index: -1;
transition-delay: @i*@t;
transform: translate3d(0, -60px, 0);
}
.loop(@i + 1);
}
.loop(@i) when (@i <= @n) {
&:nth-of-type(@{i}) {
z-index: -1;
transition-delay: (@n - @i) * @t;
transform: translate3d(0, (@i - 1)*60px, 0);
}
.loop(@i + 1);
}
.share-dropworn-menu-item {
.loop(1) // 此次调用
}