SCSS文件
$dark-theme: false!default;
$primary-dark: blue;
[dark-mode='dark'] {
background:gray!important;
$dark-theme: true!global;
}
[dark-mode='light'] {
background:yellow!important;
$dark-theme: false!global;
}
@if $dark-theme==true{
$primary-dark: black!global;
} @else{
$primary-dark: blue!global;
}
的HTML
<html>
<body dark-mode="dark">
</body>
</html>
上面的代码总是设置
[dark-mode='light']中给出的$ dark-theme值，而背景设置正确 最佳答案
您似乎误解了SASS的工作原理。 SASS变量仅在编译期间使用，因此一旦代码被编译，它们将不再存在。
选择器[dark-mode='light']和[dark-mode='dark']总是被编译，而不管您的DOM中是否存在值为dark或light的元素。由于light属性是代码中的最后一个设置，所以当$dark-theme转到false时，@if始终为$primary-dark，因此blue始终具有值。
如果要保留此方法，可以改为查看CSS variables。 Here is a nice article about this。
关于html - 即使没有给定选择器的元素可用，选择器中变量的Scss设置值也会导致其更改，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/58845281/