使用选择器在两个全局SCSS之间切换

Question

由于有了AngularJS，我正在将我的公司ngUpgrade项目升级到thanks 8。因此，我有一个混合应用程序，两个角和角组件。我还使用了一个棱角材料模板，它为角和棱镜提供了SCSS文件。

我的问题是，我只想在ajs组件上使用ajs主题，在角组件上使用角主题(它们也可以嵌套)。

我搜索了一种在应用特定类时只应用一个全局css的方法，并在应用另一个类时切换到另一个全局css。在这种情况下，我真的不能做css延迟加载。

假设我的应用程序代码如下所示：

<div class="theme-1">
    <div>Some stuff that should get theme 1 CSS</div>
    <div class="theme-2">
        <div>Some stuff that need ONLY theme 2 CSS</div>
        <div>without theme 1 CSS</div>
        <div class="theme-1">
            <div>Switching back to theme 1</div>
        </div>
    </div>
</div>

当发生类theme-1或theme-2时，我希望能够在主题之间切换。

Answer 1

在我的例子中，解决方案是在我的角度组件上使用encapsulation: shadowDow。它允许我重置theme1 css并且只使用theme2 css。

我没有做很多css的调整(一些角度的材料特性不适用于shadowDom.)并且无法切换回theme1，但它是迄今为止最好的解决方案。

Answer 2

您应该为此使用BEM方法，您的代码应该是这样的。

.theme-1 {
    &__div1{...}
    &__div2{...}
    ...
}

.theme-2 {
    &__div2{...}
    ...
}
.theme-1,
.theme-2 {
    /* Common Css */
    &__div1{...}
    &__div2{...}
    ...
}

所以你现在可以写这样的类了

<div class="theme-1__div1">
    <div>Some stuff that should get theme 1 CSS</div>
    <div class="theme-2__div1">
        <div>Some stuff that need ONLY theme 2 CSS</div>
        <div>without theme 1 CSS</div>
        <div class="theme-1__div2">
            <div>Switching back to theme 1</div>
        </div>
    </div>
</div> 

对于边界元，您可以参考这个链接- http://getbem.com/naming/。如果您还不清楚，我也可以提供相同的代码。如果你有任何疑问请告诉我。