用于更换主题皮肤

作用域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

来源

2016-11-22 superPip

修改了代码snippet..please让我们知道什么工作默认红色..我们也可以从你所取得的成果中学到一些东西 – Geeky

因为萨斯变量运行时编译之前，他们不能是上下文敏感的，所以你提供的例子将是不可能的。

一些有用的阅读在这里交替例子： https://webdesign.tutsplus.com/articles/understanding-variable-scope-in-sass--cms-23498

而且我读入机CSS变量，它可以做你想要什么，并从IE /边缘留出获得在大多数浏览器支持： https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables

来源

2016-11-22 18:12:36

我不认为这是完全准确的，因为变量的作用域是变化的，所以变量可以在选择器中定义并用于第一篇文章中的建议，也可以在其他答案中指出。 –

这些是局部变量，但是它们是由SCSS中的特殊性定义的，而不是基于它们在运行CSS时的元素是什么类（这是OP所要求的，以及哪些本机CSS变量支持）。有很多解决方法和替代解决方案，但它们不是同一个东西。 –

即使有局部变量和特异性，它也可以工作。 '.theme-2 .cool-text {color：green}'和'.cool-text {color：red}'可以使用OP所需的局部变量来实现。我同意有很多解决方法，我说可以使用局部变量和范围。这可能不是最好的解决方案，但它是可行的。我也很感兴趣，你将如何使用Css变量来实现OP的目标，你能解释一下吗？ –

可以使用！默认这里检查此运行的代码片段，用你的HTML codepen

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

.cool-text { color: $primary; } 

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

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

有了这个，如果颜色没有设置任何东西，它会采取如果不是你设置的，将采取

希望它可以帮助

来源

2016-11-22 18:13:02 Geeky

你实际上并不需要**！default **关键字。在代码块外定义的变量是**全局**，并且在块内定义的变量是**局部**。它们不一样，所以！default关键字在这里并没有真正的区别。 –

好的..感谢您的解释 – Geeky

，但无论OP所要求的都可以通过这个默认的关键字来实现吗？你能解释一下什么是正确的方法吗？想要学习 – Geeky

用于更换主题皮肤

回答

相关问题