CSS中的循環代碼 在CSS中，使用@for和@while關鍵字可以實現循環，這些循環代碼通常用于生成多個相同的樣式或實現動畫等效果。 @for循環 @for循環可以讓我們根據變量的值重復執行某些代碼塊。 例如，如果我們想要為類名為“box-1”到“box-6”的6個div元素添加樣式，我們可以使用以下代碼： pre { background-color: #f5f5f5; font-family: monospace; padding: 10px; } p { font-size: 16px; line-height: 1.5; margin-bottom: 1em; } /* 使用@for循環為.box-1到.box-6添加樣式 */ @for $i from 1 through 6 { .box-#{$i} { width: 100px; height: 100px; background-color: #f00; } } 在上面的代碼中，我們使用@for關鍵字和變量$i來重復生成6個.box-*類名的樣式。變量$i從1到6遞增，每次循環都會生成一個包含對應類名的樣式塊。 @while循環 @while循環可以讓我們在滿足某個條件的情況下重復執行某些代碼塊。 例如，如果我們想要在鼠標懸停在一個按鈕上的時候，讓該按鈕漸變為灰色，我們可以使用以下代碼： /* 初始狀態為紅色 */ .button { background-color: red; color: #fff; transition: background-color 0.3s ease-in-out; } /* 鼠標懸停時變為灰色 */ .button:hover { /* 使用@while循環讓顏色從紅變為灰 */ $color: red; @while $color != #bbb { background-color: $color; $color: mix($color, #ddd, 10%); } } 在上面的代碼中，我們使用@while關鍵字和變量$color來重復實現顏色的漸變效果。我們首先將$color變量的初始值設置為紅色，使用@while循環將其漸變為灰色。在循環中，我們使用mix函數將當前顏色逐漸混合為灰色(#bbb)。當$color的值達到#bbb時，循環停止，實現了顏色的漸變效果。 總結 CSS中的循環代碼可以幫助我們快速生成多個相同的樣式或實現動畫效果。在使用@for和@while關鍵字時，我們可以結合變量和函數等多個工具，靈活地控制循環的次數和實現效果。