sass mixin 将参数作为 css 变量传递

Question

我有一个 mixin 来生成一些网格类，如下所示：

@mixin grid-columns($columns) {
  @for $i from 1 through $columns {
    .grid-col-#{$i} {
      grid-column: span #{$i};
    }
  }
}

我还在 :root { --grid-columns: 12; 处声明了一个 css 变量； }

我尝试将 --grid-columns 变量作为变量传递给 mixin

@include grid-columns(var(--grid-columns));

但是，这不起作用，我收到以下错误：

错误：var(--grid-columns) 不是整数。 在 asset/scss/_base.scss 的第 26:23 行，在 mixin

grid-columns

来自 asset/scss/_base.scss 第 26:10 行 来自 /stdin

的第 3:9 行

@包括网格列（var（--网格列））；

任何人都可以解释为什么这不起作用吗？我在网上找不到任何指定 css 变量是否允许作为参数传递给 sass mixins 的内容，但我怀疑它们是不允许的？

Answer 1

SCSS 无法访问传递的 CSS 变量的值。您仅传递对 CSS 变量的引用，该变量在浏览器中打开页面后进行评估。

因此，通过这样做：

@include grid-columns(var(--grid-columns));

您没有传递值 12，而只是传递对 --grid-columns CSS 变量的引用。

在混音中

@for $i from 1 through $columns

SCSS 然后很困惑，因为在 through 之后，应该有一个整数，但它得到了 CSS 变量引用，它不理解并失败。

Answer 2

问题可能在于 Sass 在 CSS Custom 属性之前编译。 您可以使用插值法预先评估变量。

@mixin style($color: #{var(--my-color)}) {
    color: $color;
}

https://sass-lang.com/documentation/interpolation/