I've wrote this code:

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

   @extend %place-test;
}

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

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

now, I want this result:

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

but, the result after compiling is same this:

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

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

I means, that twice repeat. Is there a function to check existing placeholder?

1 Answers

0
Arkellys On

The problem is that you are creating a new placeholder selector every time you call the mixin. You need to declare %place-test outside of it and then it will compile as you want:

%place-test {
   display: red;
}

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

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

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

This assumes that you have more properties in the mixin. Otherwise, it's better to call @extend directly.