与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