寫SASS循環使用變量

Question

我不知道是有寫這個辦法：

&:hover#{map-get($selectors, notDisabled)} { 
     background: $btn-default-hover-bg; 
     border-color: $btn-default-hover-border; 
     color: $btn-default-hover-color; 
     @include box-shadow($btn-default-hover-boxshadow); 
    } 
    &:focus#{map-get($selectors, notDisabled)} { 
     background: $btn-default-focus-bg; 
     border-color: $btn-default-focus-border; 
     color: $btn-default-focus-color; 
     @include box-shadow($btn-default-focus-boxshadow); 
    } 
    &:active#{map-get($selectors, notDisabled)} { 
     background: $btn-default-active-bg; 
     border-color: $btn-default-active-border; 
     color: $btn-default-active-color; 
     @include box-shadow($btn-default-active-boxshadow); 
    } 

..成一個有用的循環，通過把[hover, focus, active]作爲值在兩個&: -selector和變量用於SASS代碼。我試圖使用#{map-get}結構，但沒有任何成功。感謝您的任何提示！

Answer 1

你可以使用地圖來定義選擇，狀態和值：

$selectors:( 
    '.class': ( 
    hover :(back: red, color: red, border: red, shadow: 0 0 10px red ), 
    focus :(back: green, color: green, border: green, shadow: 0 0 10px green), 
    active:(back: blue, color: blue, border: blue, shadow: 0 0 10px blue) 
)  
    // .. add more selectors if needed  
); 

@each $selector, $states in $selectors {  
    @each $state, $values in $states {  
    #{$selector}:#{$state} {  
     background: map-get($values, back );  
     color:  map-get($values, color);  
     border-color: map-get($values, border);  
     box-shadow: map-get($values, shadow);  
    }  
    }  
} 

CSS輸出

.class:hover { 
    background: red; 
    color: red; 
    border-color: red; 
    box-shadow: 0 0 10px red; 
} 

.class:focus { 
    background: green; 
    color: green; 
    border-color: green; 
    box-shadow: 0 0 10px green; 
} 

.class:active { 
    background: blue; 
    color: blue; 
    border-color: blue; 
    box-shadow: 0 0 10px blue; 
}