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