css - 作用域的SCSS变量

我有一组适合不同主题的调色板，如下所示：

$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变量是在运行时之前编译的，因此它们不能与上下文相关，因此您提供的示例将无法实现。

一些有用的阅读方法和替代示例：
https://webdesign.tutsplus.com/articles/understanding-variable-scope-in-sass--cms-23498

而且我读了本机CSS变量，它可以完全满足您的要求，并且除了IE / Edge之外，还获得了大多数浏览器的支持：
https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables

关于css - 作用域的SCSS变量，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/40748622/