Question

我已经编写了这段代码：

@mixin test() {
  @at-root {
    %place-test {
      display: red;
    }
  }

   @extend %place-test;
}

.parent-test {
     @include test();
}

.parent-test-2 {
    @include test();
}

现在，我想要这个结果：

.parent-test-2,
.parent-test {
   display: red;
}

但是，编译后的结果与此相同：

.parent-test-2,
.parent-test {
   display: red;
 }

.parent-test-2,
.parent-test {
   display: red;
}

我的意思是，重复两次。有检查现有占位符的功能吗？

Answer 1

问题是您每次调用mixin时都在创建一个新的占位符选择器。您需要在其外部声明%place-test，然后它将根据需要进行编译：

%place-test {
   display: red;
}

@mixin test() {
   @extend %place-test;
}

.parent-test {
   @include test();
}

.parent-test-2 {
   @include test();
}

这假定您在mixin中具有更多属性。否则，最好直接调用@extend。

有检查现有占位符的功能吗？

1 个答案: