css - sass 中的原生 css 混合

Question

我尝试使用 native 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 mixin 来做同样的事情:

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

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