與SASS嵌套的數據切換

Question

我想知道是否可以在SASS中嵌套數據切換。 說我有一些按鈕，使其是相同的寬度和高度，但每個按鈕的顏色是不同的。

有沒有可能讓他們喜歡：

[data-toggle]{ 
    width:150px; 
    height:50px; 
    &=result{ 
    background:green; 
    } 
    &=create{ 
    background:red; 
    } 
} 

Answer 1

這不是可以嵌套你已經建議的方式選擇。

一種解決方案是創建data-toggle值以背景顏色的薩斯地圖，然後使用@each循環遍歷鍵 - 值對：

// Base styling for elements with the [data-toggle] attribute 
[data-toggle] { 
    width: 150px; 
    height: 50px; 
} 

// Generate declarations for colored toggles 
$data-toggle-colors: (
    'result': green, 
    'create': red 
); 

@each $color in $data-toggle-colors { 
    $key: nth($color, 1); 
    $value: nth($color, 2); 

    [data-toggle=#{$key}] { 
    background-color: $value; 
    } 
} 

Codepen：https://codepen.io/anon/pen/Lkgxvv