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

Question

我正在将我的公司 AngularJS 项目升级到 Angular 8，感谢 ngUpgrade。所以我有一个包含 angularjs 和 angular 组件的混合应用程序。我也在使用 angular material 模板，它为 angular 和 angularjs.

提供 SCSS 文件

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

我搜索了一种在应用特定 class 时仅应用一个全局 css 并在应用另一个 class 时切换到另一个全局 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>

我希望能够在出现 class theme-1 或 theme-2 时切换主题。

Answer 1

你应该为此使用 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>

对于 BEM，您可以参考此 link - http://getbem.com/naming/。如果您仍然不清楚，我也可以提供相同的代码。如果您有任何疑问，请告诉我。

Answer 2

我的解决方案是在我的 angular 组件上使用 encapsulation: shadowDow。它允许我重置 theme1 css 并仅使用 theme2 css。

我没有做很多 css 调整（一些 angular material 功能不适用于 shadowDom...）并且无法切换回 theme1，但这是最好的解决方案到目前为止。

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

Switch between 2 global SCSS using selector

css

angularjs

angular

sass

ng-upgrade