循环 SCSS 变量以生成 CSS 变量

Question

我想是否有可能从 sass 变量中获取 css 变量。 我有下一个 sass 变量：

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px,
);

我正在尝试进行迭代作为下一个：

@each $key,$val in $breakpoints{
  // Here I want to generate the css variables with a for or manually
  --breakpoint-#{$key}: $val; // I tried to do something like this but it doesn't works
}

预期的 output 结果：

--breakpoint-xs: 0;
--breakpoint-sm: 576px;
--breakpoint-md: 768px;
--breakpoint-lg: 992px;
--breakpoint-xl: 1200px;
--breakpoint-xxl: 1400px;

Answer 1

如下更改您的循环。 请注意，我将$val替换为#{$val} ：

:root {
  @each $key, $val in $grid-breakpoints {
    --breakpoint-#{$key}: #{$val};
  }
}

语法#{…}称为插值，它是将动态值注入 CSS 变量（自定义属性）的唯一方法。 这是来自文档的引用：

CSS 自定义属性，也称为 CSS 变量，具有不寻常的声明语法：它们允许在其声明值中包含几乎任何文本。 此外，JavaScript 可以访问这些值，因此任何值都可能与用户相关。 这包括通常会被解析为 SassScript 的值。

因此，Sass 解析自定义属性声明的方式与其他属性声明不同。 所有令牌，包括那些看起来像 SassScript 的令牌，都按原样传递给 CSS。 唯一的例外是interpolation ，这是将动态值注入自定义属性的唯一方法。