sass 中的原生 css mixins

Question

我正在尝试使用本机 css mixins 来构建另一个 css mixins，但我在编译时遇到了跟随错误：

$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;
   ----^

编辑：

根据@vanloc，它不能为@apply 规则完成，就像您在全局范围（:root）上定义它一样，它将始终只使用该范围内的变量，因此您不能传递您的本地值。

所以我尝试使用 sass mixins 来做同样的事情：

@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) 上定义它一样，它将始终仅使用该范围内的变量，因此您无法传递本地值。

这很可悲，但至少你可以使用例如复制/粘贴你的 mixin 到你的“范围”。预处理器，而不是你的本地 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;
}