使用哈希與scss

Question

嗨我有許多變量與顏色。所以想要做這樣的事情：

$culture: #00CC66; 
$party:#CC9900; 

@each $i in culture, party { 
.bl_#{$i}{ 
    border-left-color: #{$#{$i}}; 
} 
} 

打印：

bl_culture{border-left-color:#00cc66} 
bl_party{border-left-color:#cc9900} 

如何IDO呢？

謝謝

Answer 1

傷心，因爲它是，你不能。 SASS只會解析您的文件一次，所以即使你做這樣的事情：

$culture: #00CC66; 
$party:#CC9900; 

@each $i in culture, party { 
    .bl_#{$i}{ 
    border-left-color: #{'$' + $i}; 
    } 
} 

您將結束與下面的CSS：

.bl_culture { 
    border-left-color: $culture; } 

.bl_party { 
    border-left-color: $party; } 

您最好的選擇可能是改變你的代碼是這樣的：

.bl { 
    [...] 

    &.culture { 
    border-left-color: #00CC66 
    } 
    &.party { 
    border-left-color: #CC9900 
    } 
} 

然後使用類似class="bl culture"，而不是class="bl_culture"。

Answer 2

SASS 3.3 UPDATE
有了一些新的功能，從青菜3.3，你可以選擇你的變量名和用做趕走煩人nth()

@each $name, $color in(
    'red' $red, 
    'green' $green, 
) { 
    .color-#{$name} { 
     background-color: $color; 
    } 
} 

ORIGINAL
這是一個有點痛，但你可以通過列表來獲取，然後循環瀏覽。
例如：

$colorList: 
    "red" $red, 
    "green" $green 
; 

@each $i in $colorList{ 
    .color-#{nth($i,1)}{ 
     background-color:nth($i,2); 
    } 
} 

有預先定義的這些顏色瓦爾別處你：//計算器：

.color-red{ 
    background-color:#FF0000 
} 

.color-green{ 
    background-color:#00FF00 
}