css - 如何管理结构相同但颜色不同的多个css皮肤？

Question

我需要三个只有不同颜色的皮肤
我如何创建它们以便默认文件重组自动应用于其他文件？

<div class="test">
  Test
</div>

默认变量.scss:

$background: #f00;

默认.scss:

@import "defaultVariables.scss";

.test{
    background: $background;
}

默认.css:

.test{
    background: #f00;
}

darkVariables.scss:

$background: #000;

深色.scss:

@import "default.scss";
@import "darkVariables.scss";

dark.css:预期输出 -> 背景:#000；

.test{
    background: #f00;
}

lightVariables.scss:

$background: #fff;

light.scss:

@import "default.scss";
@import "light.scss";

light.css: 预期输出 -> 背景:#fff;

.test{
    background: #f00;
}

Answer 1

您必须定义_variable.scss 并将所有颜色写入此文件:

//colors
$background:red;
$primary-color:#b22930;
$second-color:#dd4420;

//and then define again variables in dark mode for example:

body[data-theme="dark"]{
//colors
$background:#333;
$primary-color:#555;
$second-color:#888;
}

或查看此链接: link for example