当主体中的类发生变化时，有什么方法可以用颜色变量更改scss文件吗？
我的意思是当我在html:
<body class="custom"> ... </body>
我想在style.scss 中加载
@import 'custom';
当我有时
<body class="dark-mode"> ... </body>
我想在style.scss 中加载
@import 'dark-mode';
不能根据条件生成@import，但有很多其他可能的方法。这是我当时写的一个小框架。
@function keyFilter($iKey, $fKey, $rKey) {
@if ($iKey == $fKey) {
@return $rKey;
}
@return $iKey;
}
@function v($key) {
@return var(--#{$key});
}
//
$modes: (
"&": (
"color": #000,
),
"dark": (
"color": #fff,
),
);
//
@each $key, $map in $modes {
body#{keyFilter("[#{$key}]", "[&]", null)} {
@each $key, $value in $map {
--#{$key}: #{$value};
}
}
}
致"；寄存器"；新模式只需在$modes-映射中嵌套另一个映射，就可以添加任意多个模式。请记住，"&"-模式代表默认模式。
$modes: (
"&": (
//...
),
"dark": (
//...
),
//...
);
要注册新的模式相关变量，只需输入相应模式的键和值即可。
$modes: (
"&": (
"color": #000,
"bgc": #fff,
"bgc-contrast": #eee,
//...
),
"dark": (
"color": #fff,
"bgc": #000,
"bgc-contrast": #424242,
//...
),
);
要调用一个变量，只需使用v($key)函数。
body {
color: v(color);
background-color: v(bgc);
}
div.contrasted {
background-color: v(bgc-contrast);
}
此编译为：
body {
--color: #000;
--bgc: #fff;
--bgc-contrast: #eee;
}
body[dark] {
--color: #fff;
--bgc: #000;
--bgc-contrast: #424242;
}
body {
color: var(--color);
background-color: var(--bgc);
}
div.contrasted {
background-color: var(--bgc-contrast);
}
注意：您不需要为每个模式声明每个变量。如果没有为当前模式找到变量，则不会引发错误
例如：这个。。。
$modes: (
"&": (
//...
),
"dark": (
"color": #fff,
"bgc": #000,
"bgc-contrast": #424242,
//...
),
);
//...
body {
color: v(color);
background-color: v(bgc);
}
div.contrasted {
background-color: v(bgc-contrast);
}
完全没问题。