SASS：meta.load-css <without selector>

Question

我正在尝试制作这样的模块：

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

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

主题悬停.scss

selector {
   background-color: red;
}

theme-hover.scss 不应该有任何像这样的选择器：

background-color: red;

但是如果没有选择器，scss 编译器会拒绝该代码。 我尝试使用

> & { ... }

和

&:not(suck) { ... }

但都没有成功。

有什么解决办法吗？

Answer 1

您可以通过将 CSS 代码包装在

@mixin

中来避免这种情况，这将可以通过

@use

和

@include

而不是

@use "sass:meta";

和

@include meta.load-css()

规则进行访问。

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

// main.scss
@use "module";

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

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