Question

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

我有一个复选框，将<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内部使用

Answer 1

SASS / SCSS是预处理器。 SASS变量已替换为值。 SASS / SCSS

$red: #ff0000
color: $red

在CSS中编译后将会

color: #ff0000

如果要在SASS中使用CSS变量，则必须在CSS代码中使用like：

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变量一起使用

1 个答案: