Question

我们的网络应用程序（Angular 1，Telerik Kendo，Bootstrap v4）有两个主题：＆＃34; light＆＃34;并且＆＃34;黑暗＆＃34;。我们使用SCSS生成我们的CSS，相当于以下内容：

html {
    /* common css properties [snipped] */

    &.light {           
        @import "./kendo/kendo.common-bootstrap.core.min";
        @import "./kendo/kendo.bootstrap-v4.min";

        @import "./variables.scss";
        @import "components.scss";          
    }

    &.dark {
        @import "./kendo/kendo.common-material.min";
        @import "./kendo/kendo.materialblack.min";

        @import "./variables-inverse.scss";
        @import "components.scss";
    }
}

我们在html元素上设置了一个类来设置主题。该网站总是是＆＃34; light＆＃34;或者＆＃34;黑暗＆＃34;，没有别的。这对我们来说非常有效。但是，它也会导致大量重复的CSS规则，导致CSS文件大于必要。我的意思的一个人为的例子：

html.light a { margin: 2em; }
html.dark a { margin: 2em; }

如果网站总是＆＃34;轻＆＃34;或者＆＃34;黑暗＆＃34;，这些规则实际上是重复的，可以简化为：

a { margin: 2em; }

我们在构建过程中使用Gulp。

问题：如何删除我的CSS规则或避免首先复制它们？

重复删除CSS

0 个答案: