css - 提取主题感知样式的 CSS 差异

Question

我有一个元素，其中的 CSS 是通过 webpack 从 Sass 生成的。我确实有一些用于主题化的 Sass 变量:$color-primary, $color-bg, ...

因为我想创建一个浅色和深色主题，所以我必须将它编译成两个 CSS 文件，这不是真正的问题。

问题在于 app-light.css 和 app-dark.css 的大部分样式都是相同的，因为它们不支持主题。

我想要的是提取所有主题感知的选择器和属性并将其保存到app-dark.css中，因此它只包含与主题相关的数据主题。

差异示例(并排显示 app-light.css 和 app-dark.css):

我需要找到一个工具或方法来创建一个 app-dark.css，它会为显示的差异生成以下内容:

h1 { 颜色:#fff; }

就是这样，因为这是唯一的主题感知属性和选择器。

Answer 1

您可以在全局 Sass 变量和混合宏的帮助下进行干净的拆分。

我猜你的出发点是两个单独的文件，可能是在这两个文件中导入和编译的一些 Sass 部分。

首先在每个文件中选择你的冠军，像这样:

/* In app-light.scss */
$globalTheme: light !global;

/* In app-dark.scss */
$globalTheme: dark !global;

然后创建一个@mixin，仅当您的全局变量和 mixin 参数是light 或dark 时才返回内容，如下所示:

/* @mixin onlyInTheme() */
@mixin onlyInTheme($theme: null) {
    @if (global-variable-exists(globalTheme)) {
        @if ($theme == light and $globalTheme == light) {
            @content;
        }
        @if ($device == dark and $globalTheme == dark) {
            @content;
        }
    } @else {
        @warn "Global $appTheme variable does not seem to exist. No mixin for you!";
    }
}

现在你可以为每个主题编写单独的规则，它们只会被编译到相应的文件中。这是一个例子:

h1 {
    font-weight: 400; 
    margin: 0 0 3rem;
    line-height: 1.3;

    @include onlyInTheme(light) {
        color: #000;
    }

    @include onlyInTheme(dark) {
        color: #fff;
    }
}

这应该会为您提供两个文件之间所需的差异。