如何使用for循環在Scss中增加一個變量？

很確定這是不可能與Sass/Scss，但要確定這是Sass的限制，而不是我自己對語法的誤解......如何使用for循環在Scss中增加一個變量？

我試圖創建一個樣式列表其中每個列表項獲得從一堆變量中分配的不同顏色：

$color1: #FF0000; // Red 
$color2: #FFBF00; // Orange 
$color3: #FFFF00; // Yellow 
$color4: #7FFF00; // Green 
$color5: #007FFF; // Light Blue 
$color6: #00FFFF; // Cyan 
$color7: #0000FF; // Blue 
$color8: #7F00FF; // Purple 
$color9: #FF00FF; // Magenta 

@for $i from 1 through 9 { 
a[href^="link#{$i}"] { color: $color#{$i}; 
} 
}

但是，Sass不會編譯。我想這是不可能以這種方式增加變量名稱的。有人可以確認嗎？

來源

2012-10-12 Ben Frain

不能以動態方式創建的變量名，但你可以更好的語義和靈活性實現這一目標：

$red  : #FF0000; 
$orange  : #FFBF00; 
$yellow  : #FFFF00; 
$green  : #7FFF00; 
$lightblue : #007FFF; 
$cyan  : #00FFFF; 
$blue  : #0000FF; 
$purple  : #7F00FF; 
$magenta : #FF00FF; 

$colors: $red $orange $yellow $green $lightblue $cyan $blue $purple $magenta; 

@each $color in $colors { 
    $i: index($colors, $color); 
    a[href^="link#{$i}"] { color: $color; } 
}

UPDATE：在薩斯3.3，你可以使用地圖少重複。

$colors: (
    red  : #FF0000, 
    orange  : #FFBF00, 
    yellow  : #FFFF00, 
    green  : #7FFF00, 
    lightblue : #007FFF, 
    cyan  : #00FFFF, 
    blue  : #0000FF, 
    purple  : #7F00FF, 
    magenta : #FF00FF, 
); 

@each $name, $color in $colors { 
    a[href^="link#{$name}"] { color: $color; } 
}

來源

2012-10-13 06:40:03

嗨，Eric，謝謝。是的，我知道用列表做這件事，但是想知道它是否可以動態地完成。儘管如此，這個問題仍然可以回答（任何其他讀者都應該知道，Eric是Compass核心團隊成員和Susy指南針插件的創造者）。非常感謝。 –

剛開始使用Eric的代碼的修正版本。它只是需要修改爲使用'@ each'而不是'@ for'。因此： $ red：＃FF0000; $ orange：＃FFBF00; $ yellow：＃FFFF00; $ green：＃7FFF00; $ lightblue：＃007FFF; $ cyan：＃00FFFF; $ blue：＃0000FF; $ purple：＃7F00FF; $洋紅色：＃FF00FF; $顏色：$紅色$橙色$黃色$綠色$淺藍色$青色$藍色$紫色$洋紅色; @顏色$顏色{ $ i：index（$顏色，$顏色）; a [href^=「link＃{$ i}」] {color：$ color; } } –

已更新以反映此更正。謝謝@BenFrain！ –

如何使用for循環在Scss中增加一個變量？

回答

相關問題