css - 有没有办法将 SASS 变量指向 CSS 变量？

Question

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

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

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

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

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

非常感谢！

Answer 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