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