为什么不能基于类更改scss变量？我希望在黑暗模式下该变量为绿色。
Css：
$test: red;
@mixin darkTheme {
$test: green;
}
.theme-dark {
@include darkTheme();
.test {
background-color: $test;
}
}
HTML：
<body class="dark-mode">
<div class="test">test</div>
</body>
我该如何完成？我不想要2个变量。
答案 0 :(得分：2)
这是因为可变范围。
在Sass中，所有在
或函数中声明的变量都将具有全局作用域，并且可以在使用该变量的任何Sass选择器中进行引用。 （source）
这意味着，mixin或函数内部的所有 变量集仅在该mixin或函数中可用，即使该变量先前已全局设置。
您可以为每个主题创建一个部分文件，然后将其导入每个主题的父类下。
_theme-dark.scss$background-color: #000;
$text-color: #fff;
$background-color: #fff;
$text-color: #000;
body {
background: $background-color;
color: $text-color;
}
.theme-dark {
@import "theme-dark";
@import "themed-page";
}
.theme-light {
@import "theme-light";
@import "themed-page";
}
另一个选择是将主题值存储在地图中，并具有实用程序功能来检索所需的值。 （source）
_theme-variables.scss$theme: 'default';
$theme-values: (
'background-color': (
'default': #eee,
'light': #fff,
'dark': #000
),
'text-color': (
'default': #333,
'light': #000,
'dark': #fff
)
);
@function theme-value($key) {
$map: map-get($theme-values, $key);
@return map-get($map, $theme);
}
body {
background: theme-value('background-color');
color: theme-value('text-color');
}
.theme-dark {
$theme: 'dark';
@import "themed-page";
}
.theme-light {
$theme: 'light';
@import "themed-page";
}