为啥 CSS 变量不能与 SCSS 变量一起使用

Posted

技术标签:

【中文标题】为啥 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 变量，不要同时使用两者 好的。伊玛试着解决一些问题 【参考方案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);
        
        ...

【讨论】：

以上是关于为啥 CSS 变量不能与 SCSS 变量一起使用的主要内容，如果未能解决你的问题，请参考以下文章

如何访问具有多个属性的 SCSS 变量

为啥变量在 Powershell 中不能与 Get-Aduser 一起使用？

在 Nuxt 颜色模式下使用 SCSS 变量

如何让 Storybook 使用项目的 CSS 变量

为啥 CSS 中的 background:url 不能与 Django 一起使用？

为啥 CSS 中的 background:url 不能与 Django 一起使用？