Question

我正在为当前项目使用SASS（.scss）。

HTML

true

SCSS

array.map()

Answer 1

请记住，&的行为几乎像Sass中的占位符。这样，仅使用插值util #{}来避免字符串串联就容易了。

所以答案将像这样简单

.colours {
   width: 50px;
   height: 50px;

   &--blue {
      background-color: blue;
   }

   &--yellow {
      background-color: yellow;
   }

   &--blue#{&}--yellow {
      background-color: green;
   }
}

Working Demo

Answer 2

也许可以考虑使用如下所示的变量：

$c:'.colours';

#{$c} {
   width: 50px;
   height: 50px;

   &--blue {
      background-color: blue;
   }

   &--yellow {
      background-color: yellow;
   }

   &--blue {
      &#{$c}--yellow { 
        background-color: green;
      }
   }
}

Answer 3

您可以使用选择器功能：

@at-root #{selector-unify(selector-append(&, "--blue"), selector-append(&, "--yellow"))} {
   background-color: green;
}

最好将其包装在另一个mixin中，这样更易于使用：

@mixin both-colours($a, $b) {
   @at-root #{selector-unify(selector-append(&, "--#{$a}"), selector-append(&, "--#{$b}"))} {
      @content;
   }
}

用作

@include both-colours(blue, yellow) {
   background-color: green;
}

具有两个嵌套类时适用的SASS（.scss）规则

3 个答案: