SCSS：如果語句在CSS規則

Question

是否有可能在css規則中添加sass if語句？避免重複。我嘗試過，但sass抱怨語法。

@mixin outline($color, $shadow:'none') { 

    text-shadow: 
     1px 0 0 $color, 
     0 1px 0 $color, 
     0 -1px 0 $color, 
     -1px 0 0 $color 

     @if $shadow != 'none' { 
      , $shadow 
     } 
     ; 
} 

Answer 1

你可以聲明一個數組來存儲所有的陰影，然後追加$shadow如果有條件的聲明是真實的

@mixin outline($color, $shadow: false) { 
    $shadows: (
    1px 0 0 $color, 
    0 1px 0 $color, 
    0 -1px 0 $color, 
    -1px 0 0 $color); 

    @if $shadow { 
    $shadows: append($shadows, $shadow); 
    } 
    text-shadow: $shadows; 
} 

時退房SASS append function reference