sass中的本机css混频器

Question

我尝试使用本机css混合器来构建另一个css混合器，但是在编译时会出现以下错误：

$blue:            #29579b;

:root {
  --edi-blue: $blue;

  --text: {
    font-style: normal;
    font-stretch: normal;
    text-align: center;
    color: var(--edi-blue);
  }

  --text--bold: {
    @apply --text;
    font-weight: bold;
  }
}

.someclass {
  @apply --text--bold;
}

错误：

[16:48:58] Starting 'sass'...
[16:48:58] Finished 'sass' after 7.22 ms
Error in plugin 'sass'
Message:
    src/shared/styles/sass/webcomponents-shared-styles.scss
Error: Illegal nesting: Only properties may be nested beneath properties.
        on line 11 of src/shared/styles/sass/webcomponents-shared-styles.scss
>>     @apply --text;
   ----^

编辑：

对于@apply规则，如果您在全局范围(:root)上定义了@apply规则，它总是只使用来自该作用域的变量，因此不能传递本地值。

所以我试着用sass混音器做同样的事情：

@mixin --text() {
  font-style: normal;
  font-stretch: normal;
  text-align: center;
  color: var(--edi-blue);
}

:root {
  --edi-blue: $blue;

  --text: {
    @include --text;
  }

  --text--bold: {
    @include --text;
    font-weight: bold;
  }
}

.someclass {
  @apply --text--bold;
}

问题是代码生成：

:root {
  --text-font-style: normal;
  --text-font-stretch: normal;
  --text-text-align: center;
  --text-color: var(--edi-blue);
  --text--bold-font-style: normal;
  --text--bold-font-stretch: normal;
  --text--bold-text-align: center;
  --text--bold-color: var(--edi-blue);
  --text--bold-font-weight: bold; }

.someclass {
  @apply --text--bold; }

而不是：

:root {
  --text: {
    font-style: normal;
    font-stretch: normal;
    text-align: center;
    color: var(--edi-blue);
  }

  --text--bold: {
    font-style: normal;
    font-stretch: normal;
    text-align: center;
    color: var(--edi-blue);
    font-weight: bold;
  }
}

    .someclass {
      @apply --text--bold; }

Answer 1

不幸的是，它不能用于@apply规则，就好像您在全局范围(:root)上定义它一样--它总是只使用来自该作用域的变量，因此不能传递您的本地值。

这是可悲的，但至少您可以使用预处理器和本地CSS变量将您的混合文件复制/粘贴到您的“作用域”。

应该是这样的：

$blue:            #29579b;

:root {
  --edi-blue: $blue;

  --text: {
    font-style: normal;
    font-stretch: normal;
    text-align: center;
    color: var(--edi-blue);
  }
}

.text--bold {
   @apply --text;
   font-weight: bold;
}