我有一组不同主题的调色板,如下所示:
$primary: red;
$secondary: blue;
.theme-2 { $primary: green; $secondary: yellow; }
//..
//some random scss file that has typography class names
.cool-text { color: $primary; }
是否有可能做到这一点,无论应用到容器的类名如何使用为其定义的可变调色板颜色?
例如:
<div class="theme-2">
<p class="cool-text"> cool </p> // should be green
</div>
<p class="cool-text"> cool </p> //should be red
最佳答案
因为 Sass 变量是在运行前编译的,它们不能是上下文相关的,所以你提供的例子是不可能的。
这里有一些有用的阅读 Material 和替代示例: https://webdesign.tutsplus.com/articles/understanding-variable-scope-in-sass--cms-23498
我还阅读了 native CSS 变量,它们可以完全按照您的意愿执行操作,并且在除 IE/Edge 之外的大多数浏览器中都获得了支持: https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables
关于css - 用于主题的范围 SCSS 变量,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40748622/