循環 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 ，這是將動態值注入自定義屬性的唯一方法。