问题描述
我需要三个只有不同颜色的皮肤
如何创建它们以便将默认文件重组自动应用于其他文件?
<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;
}
解决方法
您必须定义 _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
,最有效的方法是使用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>