为什么 CSS 变量不能与 SCSS 变量一起使用答案

【问题标题】：Why won't CSS variables work with SCSS variables为什么 CSS 变量不能与 SCSS 变量一起使用
【发布时间】：2020-03-14 06:34:13
【问题描述】：

我正在尝试为我的项目实施暗模式。请分享任何更好的方法。

我有一个将<html data-theme="light"> 更改为<html data-theme="dark"> 的复选框。然后我使用CSS 更改变量的值，以便它们可以更新使用的位置。

// Light theme colors
html[data-theme="light"]{
   --body: #fff;
   --primary: #0077FF;
   --secondary: #3f3d56;
   --danger: #f00;
   --text: #707070;
   --el-bg: #fff;
   --border: #ddd;
   --shadow: #ddd;
}

// Dark theme colors
html[data-theme="dark"]{
   --body: #111;
   --primary: lighten(#0077FF, 10%);
   --secondary: #3f3d56;
   --danger: #f00;
   --text: #eeeeee;
   --el-bg: #222;
   --border: #000;
   --shadow: #000;
}

$body: var(--body);
$primary: var(--primary);
$secondary: var(--secondary);
$danger: var(--danger);
$text: var(--text);
$el-bg: var(--el-bg);
$border: var(--border);
$shadow: var(--shadow);

问题是SCSS variables 不会采用从本机CSS variables 分配的值

我尝试过仅使用 CSS variables，但它们无法在 SCSS functions 内部工作，例如 darken and lighten

【问题讨论】：

因为 SASS 是 CSS 之前的预处理器，所以 CSS 变量在这个级别是不存在的
知道实现我的目标吗？
你根本做不到。要么使用 SASS 变量，要么使用 CSS 变量，不要同时使用两者
好的。伊玛试着解决一些问题

标签： javascript html css sass

【解决方案1】：

SASS/SCSS 是一个预处理器。 SASS 变量被替换为值。 SASS/SCSS

$red: #ff0000
color: $red

在CSS中编译后会

color: #ff0000

如果你想在 SASS 中使用 CSS 变量，你必须像在 CSS 代码中一样使用：

color: var(--text)

您可以托盘使用类，例如：

    html[data-theme="light"]{
        --body: #fff;
        ...
        .body-color{
            background-color:var(--body);
        }
        ...
    }
    // Dark theme colors
    html[data-theme="dark"]{
        --body: #111;
        ...
        .body-color{
            background-color:var(--body);
        }
        ...
    }

【讨论】：