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

Posted 2023-03-06

【中文标题】提取主题感知样式的 CSS 差异

【英文标题】：Extract CSS difference for theme-aware styles

【发布时间】：2020-02-05 14:28:09

【问题描述】：

我有一个项目，其中 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 color:#fff;

就是这样，因为这是唯一可识别主题的属性和选择器。

【问题讨论】：

看看这个深色/浅色主题 should be done 的好例子。您不需要两个单独的文件。

@GrzegorzT。我的项目使用的是 Sass 变量（如问题中所述）而不是 CSS 变量。

有一个工具可以做到这一点。它在 Linux 上称为 diff 并衍生出 :)。

【参考方案1】：

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

我猜你的出发点是两个单独的文件，可能是在这两个文件中导入和编译的一些 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;
    

这应该会给你两个文件之间的差异。