SASSでネストされたデータトグル

Question

SASSでデータトグルをネストすることが可能かどうかは疑問でした。 同じ幅と高さを持つボタンをいくつか用意していますが、それぞれのボタンの色は異なります。

、彼らが好きにすることが可能になります：

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

Answer 1

それは巣にあなたが提案してきた方法で、セレクタはできません。

一つの解決策は、キーと値のペアを反復する@eachループを使用し、その後、背景色にdata-toggle値のサスマップを作成することである。

// 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