有没有办法将 SASS 变量指向 CSS 变量？答案

【问题标题】：Is there a way to point a SASS variable at a CSS variable?有没有办法将 SASS 变量指向 CSS 变量？
【发布时间】：2021-06-10 21:45:05
【问题描述】：

我正在尝试实现暗模式并希望使用 CSS 变量，以便我可以根据是否启用亮/暗模式轻松更改颜色。我正在使用 prefers-color-scheme 媒体查询来显示 css 变量的颜色变化。

我面临的问题是我正在处理的项目包含许多 sass 变量，这些变量出现在数千个属性和数十个文件中，在基本引导模板内。

我尝试更新 sass 变量以获取 CSS 变量值。例如$primary = var(--color-primary)，但这不起作用。

有没有办法可以将这些 SASS 变量重定向到 CSS 变量以便它们被继承？

我真的不想开始弄乱基本引导模板，因为它非常混乱且难以维护。理想情况下，我只想编辑我的 variables.scss 文件。

非常感谢！

【问题讨论】：

我认为这不可能：记住 SCSS/SASS 变量是在构建时设置的，但 CSS 变量在运行时是动态的。因此，您不能将 SCSS/SASS 变量分配为具有 CSS 变量的值，因为在构建时不可能知道后者的值。
好的，谢谢您的回复。我担心这会是答案，看起来我将不得不开始撕开引导主题文件

标签： css variables sass root darkmode

【解决方案1】：

// _variables.scss


// colors
$gin:#EDF5EE;
$linen:#FCF4EC;
$white:#FFFFFF;
$zircon:#EBF3FE;
$goblin:#00803C;
$cinnabar:#DC0700;

$colors: () !default;

$colors: map-merge(
  (
    "gin": $gin,
    "white": $white,
    "linen": $linen,
    "goblin": $goblin,
    "zircon": $zircon,
    "cinnabar": $cinnabar,
  ),
  $colors);

:root {
  --gin: #{$gin};
  --white: #{$white};
  --linen: #{$linen};
  --goblin: #{$goblin};
  --zircon: #{$zircon};
  --cinnabar: #{$cinnabar};
}



// Credit: https://github.com/lawrenceadu

【讨论】：