时间戳

首页 > 解决方案 > SASS - “内部元素”选择器

css - SASS - “内部元素”选择器

问题描述

考虑一些我指定颜色的选择器。当它们在其他元素中时，我希望它们具有不同的颜色。SCSS：

.a, .b, .c {
  color: white;
}

.black {
  .a, .b, .c {
    color: black;
  }
}

它可以写得更短（不重复选择器）吗？我尝试@at-root使用

.a, .b, .c {
  color: white;
  @at-root .black #{&} {
      color: black;
  }
}

但结果并不如预期：

.a, .b, .c {
  color: white;
}
.black .a, .b, .c {
  color: black;
}

标签： csssass

解决方案

您可以为 abccolor 创建一个 mixin，然后通过 black 类运行它并在参数中添加您自己的颜色变量：

@mixin abccolour($color) {
    .a, .b, .c {
       color: $color;
    }
}

@include abccolour(white);

.black {
    @include abccolour(black);
}

这给了我们这个：

.a, .b, .c {
    color: white;
}

.black .a, .black .b, .black .c {
    color: black;
}

然后你可以在别处重用那个 abccolor mixin。我使用Online SCSS Compiler测试了这个 mixin 。

推荐阅读