是否有检查现有占位符的功能？

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

您不需要检查现有占位符的函数，这里的问题是您每次调用混合时都在创建一个新的占位符选择器。您需要在其外部声明 %place-test ，然后它将按您的需要进行编译：

%place-test {
   display: red;
}

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

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

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

这假定您在 mixin 中有更多属性。不然还是直接调用@extend比较好

是否有检查现有占位符的功能？

Is there a function to check existing placeholder?

sass

scss-mixins