如何結合使用SCSS變量與@each指令

我試圖重寫一些SCSS降低至低於寫重複的代碼...如何結合使用SCSS變量與@each指令

.bg-primary { 
    background: $primary; 
} 
.bg-secondary { 
    background: $secondary; 
} 
.bg-tertiary { 
    background: $tertiary; 
}

...到這樣的事情：

$colors: primary secondary tertiary; 

@each $color in $colors { 
    .bg-#{$color}{ 
     background: $color; 
    } 
}

但問題是，background: $color將輸出background: primary;而不是background: $primary;，輪到他時應該處理爲background: #000;。關於如何使這項工作的任何想法？謝謝！

來源

2017-03-06 MvdLanden

一種方法是使用鍵值對定義顏色映射。該鍵則可以用作類名稱的一部分：

$colors: (primary: #000, secondary: #f00, tertiary: #00f); 

@each $colorkey, $value in $colors { 
    .bg-#{$colorkey}{ 
     background: $value; 
    } 
}

使用的顏色在其他地方，那麼你將不得不使用

.example { 
    color: map-get($colors, tertiary); 
}

在某些情況下的顏色值已經定義，例如由一個底層框架。有可能在地圖中使用預先定義的顏色，當然，這會帶來一定的冗餘度，如果你想在一個循環中使用單個變量（重複的變量名），你無法迴避：

$primary: #000; 
$secondary: #f00; 
$tertiary: #00f; 

$colors: (primary: $primary, secondary: $secondary, tertiary: $tertiary); 
/* loop see above... */

在另一方面，這使得訪問其他地方的顏色更容易。

來源

2017-03-06 21:30:00 Marvin

謝謝你的關注。您的解決方案有效，但對我而言並不自然。你知道一種簡單的方法來給$ color輸出添加一個$符號嗎？像'background：$＃{$ color}''。 – MvdLanden

我完全理解你，有一種引用動態創建變量的方式會很棒。我在規範中查看了一下，並在發佈答案之前做了一個快速的研究，但是我找不到任何對此方案有用的東西。我所知道的是，這個問題出現了多次[已經幾年前]（http://stackoverflow.com/questions/6010013/is-it-possible-to-reference-a-variable-with-an-interpolated-字符串），它曾經通過使用列表，然後通過使用後來介紹的地圖解決。 – Marvin

我要把這個標記爲答案，因爲似乎沒有其他辦法，這個解決方案使它稍微更清潔。謝謝[馬文]（http://stackoverflow.com/users/3162554/marvin） – MvdLanden

如何結合使用SCSS變量與@each指令

回答

相關問題