文章/答案/技术大牛

发布

社区首页 >问答首页 >选择器中变量的Scss设置值会导致其更改，即使没有具有给定选择器的元素也是如此

问选择器中变量的Scss设置值会导致其更改，即使没有具有给定选择器的元素也是如此
EN

Stack Overflow用户

提问于 2019-11-14 04:39:41

回答 1查看 40关注 0票数 0

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值

css

sass

html

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-11-14 17:03:56

看起来你误解了SASS的工作原理。SASS变量仅在编译期间使用，因此一旦编译代码，它们就不再存在。

无论DOM中是否有值为dark或light的元素，选择器[dark-mode='light']和[dark-mode='dark']都会被编译。由于light属性是代码中的最后一个设置，因此当$dark-theme转到您的@if时，它将始终为false，因此$primary-dark将始终具有值blue。

如果你想保持这种方式，你可以看一看CSS variables。Here is a nice article about this。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/58845281

复制

相似问题

问选择器中变量的Scss设置值会导致其更改，即使没有具有给定选择器的元素也是如此
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问选择器中变量的Scss设置值会导致其更改，即使没有具有给定选择器的元素也是如此EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问选择器中变量的Scss设置值会导致其更改，即使没有具有给定选择器的元素也是如此
EN