Блог

Я пытаюсь создать такой модуль:

 button, .btn {
   @include meta.load-css("theme");

   amp;:hover {
      @include meta.load-css("theme-hover");
   }
}
 

тема-hover.scss

 selector {
   background-color: red;
}
 

у theme-hover.scss не должно быть такого селектора:

 background-color: red;
 

но без селектора компилятор scss отказывается от кода.
Я пытался использовать > amp; { ... } и amp;:not(suck) { ... } , но ни один из них не удался.

есть решение?

Вы можете избежать этого, обернув код CSS @mixin , который будет доступен с помощью @use and @include вместо @use "sass:meta"; @include meta.load-css() правила and .

 // _module.scss
@mixin foo {
  foo: foo;
}

// main.scss
@use "module";

.bar {
  amp;:bar {
    @include module.foo;
  }
}

// main.css
.bar:bar {
  foo: foo;
}