SASS通過未知數量的元素循環

Question

當元素數量未知時，我想使用Sass循環x個元素。我不確定這是否可行，因此我問人們是否可以看看下面的兩種情況，並提供一些關於如何實現它們的信息。

首先，我願做這樣的事情：

@each $slide in $slides { 
    #slide-right#{$i} { 
    left: 1px; 
    } 
} 

輸出是這樣的：

#slide-right0 { 
    left: 1px; 
} 
#slide-right1 { 
    left: 1px; 
} 
#slide-right2 { 
    left: 1px; 
} 

...等。

其次，我要採取以下CSS並把它變成某種循環代碼簡潔：

#slide0 { 
    order: 1; 
    -webkit-order: 1; 
    -ms-flex-order: 1; 
} 
#slide-right0 { 
    order: 2; 
    -webkit-order: 2; 
    -ms-flex-order: 2; 
} 
#slide1 { 
    order: 3; 
    -webkit-order: 3; 
    -ms-flex-order: 3; 
} 
#slide-right1 { 
    order: 4; 
    -webkit-order: 4; 
    -ms-flex-order: 4; 
} 

...等。

本質：

#slide0得到的1

#slide1秩序得到的3

訂單...等。 （所有奇數階數）

和

#slide-right0得到的2

#slide-right1的順序得到的4

順序...等。 （所有偶數訂單號碼）

是否可以設置循環以說明12張幻燈片？未知數量的幻燈片如何？

只是試圖看看是否有薩斯方式來做到這一點。任何和所有提示的讚賞！

Answer 1

這應該爲你的工作需要：

$startIndex: 0; 
$numSlides: 12; 
$order: 0; 

@for $i from $startIndex through $numSlides { 

    #slide-right#{$i} { 
    left: 1px; 
    } 

} 

@for $i from $startIndex through $numSlides { 

    $order: $order + 1; 

    #slide#{$i} { 
    order: #{$order}; 
    -webkit-order: #{$order}; 
    -ms-flex-order: #{$order}; 
    } 

    $order: $order + 1; 

    #slide-right#{$i} { 
    order: #{$order}; 
    -webkit-order: #{$order}; 
    -ms-flex-order: #{$order}; 
    } 

} 

您可以複製該代碼的運行它sassmeister查看輸出。

看看這個sass cheatsheet控制指令。