CSS 樣式的循環是一種非常常見的需求，因為它可以幫助我們快速地生成重復的樣式代碼。下面將介紹兩種主要的 CSS 樣式循環技術。 第一種技術是使用 Sass 的循環功能。Sass 是 CSS 的預處理器，它可以讓我們使用類似編程語言的方式來編寫 CSS。其中就包括循環功能。我們可以使用 Sass 的 for 循環來生成多個類似的樣式。 下面是一個使用 Sass 循環的例子：

p {
@for $i from 1 through 3 {
&.style-#{$i} {
font-weight: bold;
font-size: #{$i}em;
}
}
}

在這個例子中，我們使用 @for 循環生成三個不同的樣式類，分別為 .style-1、.style-2 和 .style-3。這三個類都有相同的屬性：字體加粗和不同的字體大小。 第二種技術是使用 CSS 中的 :nth-child() 偽類選擇器。這個偽類選擇器可以根據元素在其父元素中的位置來選擇元素。我們可以使用這個偽類選擇器來選擇一組元素中的每個第 N 個元素，并將相應的樣式應用于它們。 下面是一個使用 :nth-child() 偽類選擇器的例子：

p:nth-child(3n+1) {
font-weight: bold;
}

在這個例子中，我們使用了 :nth-child() 偽類選擇器來選擇每個第 3 個元素，并將字體加粗樣式應用于它們。 總之，CSS 樣式的循環可以幫助我們快速生成大量的樣式代碼。無論是使用 Sass 的循環功能還是使用 CSS 的 :nth-child() 偽類選擇器，都可以讓我們更高效地編寫 CSS，并減少代碼的重復。