阅读 79

scss 的for循环 转换为 less 的循环loop ,记得调用哦

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) // 此次调用
}
复制代码
文章分类
前端
文章标签