CSS中如何實現循環？

在CSS中實現循環，主要有以下幾種方法：

1. 使用@for指令

@for $i from 1 to 10 {
.box:nth-child(#{$i}) {
width: 100px * $i;
}
}

上面代碼中的@for指令，可以循環輸出1到10之間每一個數字，并將每個數字作為.box類的選擇器的索引。這樣就可以動態地計算出每一個.box元素的寬度。

2. 使用@while指令

$num: 5;
@while $num >0 {
.item:nth-child(#{$num}) {
opacity: 0.1 * $num;
}
$num: $num - 1;
}

上面代碼使用@while指令循環輸出5到1之間的數字，并將每個數字作為.item類的選擇器的索引。同時，每次循環都會將$num變量減1，直到$num不大于0。

3. 使用循環函數

@function make-border($width) {
$border: '';
@for $i from 1 through 4 {
$border: #{$border} #{if($i == 1 or $i == 3, top, right)}: $width solid black#{if($i != 4, ';', '')};
}
@return $border;
}
.box {
border: make-border(2px);
}

上面代碼定義了一個名為make-border的函數，該函數會循環輸出4條border樣式，分別設置為上邊框、右邊框、下邊框和左邊框。最后，將4條邊框樣式拼接成一個字符串，返回給調用者。這樣，就可以方便地生成具有多種邊框樣式的元素。

總之，在CSS中實現循環的方法多種多樣，我們可以根據實際需求選擇合適的方法，提高CSS的靈活性和可維護性。