提取主题感知样式的 CSS 差异 [英] Extract CSS difference for theme-aware styles

问题描述

我有一个项目，其中 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;}

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

解决方案

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

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

首先在每个文件中选择您的冠军，如下所示:

/* 在 app-light.scss */$globalTheme: 光 !global;/* 在 app-dark.scss */$globalTheme: 黑暗 !global;

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

/* @mixin onlyInTheme() */@mixin onlyInTheme($theme: null) {@if (global-variable-exists(globalTheme)) {@if ($theme == light 和 $globalTheme == light) {@内容;}@if ($device == 暗和 $globalTheme == 暗) {@内容;}} @别的 {@warn "全局 $appTheme 变量似乎不存在.没有适合你的 mixin！";}}

现在您可以为每个主题编写单独的规则，它们只会编译到相应的文件中.举个例子:

h1 {字体粗细:400；边距:0 0 3rem；行高:1.3；@include onlyInTheme(light) {颜色:#000；}@include onlyInTheme(dark) {颜色:#fff;}}

这应该给你你想要的两个文件之间的差异.

I have a project where the CSS is generated from Sass via webpack. I do have a few Sass variables which are used for theming: $color-primary, $color-bg, ...

As I want to create a light and dark theme I have to compile it to two CSS files, which isn't really a problem.

The problem is that both app-light.css and app-dark.css have most of their styles in common as they are not theme-aware.

What I want is extract all selectors and properties which are theme-aware and save it into app-dark.css, so it only contains data which is relevant for the theme.

Example diff (app-light.css and app-dark.css side-by-side):

I need to find a tool or a way on how to create an app-dark.css which would generate the following for the shown diff:

h1 { color:#fff; }

That's it, because that's the only theme-aware property and selector.

解决方案

You can make a clean split with the help of global Sass variables and a mixin.

I'm guessing your starting point is two separate files and probably some Sass partials that are imported and compiled in these two files.

First chose your champions in each of the files, like this:

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

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

Then create a @mixin that returns the content only if your global variable AND the mixin argument is either light or dark, like this:

/* @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!";
    }
}

Now you can write separate rules for each theme, and they will only be compiled to the corresponding file. Here's an example:

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

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

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

This should give you the diff you want between the two files.

这篇关于提取主题感知样式的 CSS 差异的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！