Question

我有一套适用于不同主题的调色板：

$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

Answer 1

因为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

Answer 2

你可以在这里使用！default 使用您的html codepen

检查此正在运行的代码段

$primary: red !default; 
$secondary:blue !default;

.cool-text { color: $primary; }

.theme-2 { 
    $primary: green; 
    $secondary: yellow; 

    .cool-text{
      color: $primary;
    }
}

如果颜色没有设置为任何颜色，如果不是你设置的颜色，它将采用默认的红色

希望有所帮助

用于主题化的SCSC变量

2 个答案: