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

【问题标题】：sass mixin pass argument as css variablesass mixin 将参数作为 css 变量传递
【发布时间】：2020-06-13 14:53:15
【问题描述】：

我有一个 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) 不是整数。在 assets/scss/_base.scss 的第 26:23 行，在 mixin grid-columns 从 assets/scss/_base.scss 的第 26:10 行开始从 /stdin 的第 3:9 行开始

@include 网格列(var(--grid-columns));

谁能解释一下为什么这不起作用？我在网上找不到任何东西，它指定是否允许/不允许将 css 变量作为参数传递给 sass mixins，但我怀疑它们是不允许的？

【问题讨论】：

标签： css sass

【解决方案1】：

SCSS 无权访问传递的 CSS 变量的值。您只传递了对在浏览器中打开页面后评估的 CSS 变量的引用。

因此通过这样做：

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

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

在混音中

@for $i from 1 through $columns

然后SCSS就被搞糊涂了，因为在到之后，应该有一个整数，但是它得到了CSS变量引用，它不理解并且失败了。

【讨论】：