SCSS for loop is converted to less loop

SCSS: for loop notice that there is a calculation part, use space, otherwise error

$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);
        }
    }
}
Copy the code

The loop corresponding to the following less: Note that there is a calculation part, use space, otherwise an error is reported

@n: 9; T: @ 0.1 s; .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) // this call}Copy the code