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

【问题标题】：How to manage multiple skin of css with the same structure but different colors?如何管理多个结构相同但颜色不同的css皮肤？
【发布时间】：2021-08-29 14:14:14
【问题描述】：

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

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

defaultVariables.scss：

$background: #f00;

default.scss：

@import "defaultVariables.scss";

.test{
    background: $background;
}

default.css：

.test{
    background: #f00;
}

darkVariables.scss：

$background: #000;

dark.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;
}

【问题讨论】：

什么机制决定将哪个scss文件加载到页面上？
这些天 css 真的允许// 风格的评论吗？

标签： css sass less

【解决方案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

【讨论】：

【解决方案2】：

最有效的方法是使用css能力：

function toggleSkin() {
   document
   .getElementsByTagName("html")[0]
   .classList
   .toggle("dark");
}

:root {
    --back-color: #fff;
    --color: #000;
}

html.dark {
    --back-color: #000;
    --color: #fff;
}

body {
  background: var(--back-color);
  color: var(--color);
}

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <div>
        Test
    </div>
    <input type="button" value="Toggle skin" onclick="toggleSkin()" />
</body>
</html>

【讨论】：