是否有 css 缩小器从 :root {}（可能来自不同的文件）计算变量？

Question

我正在寻找一个 CSS 压缩器，或者可能只是 CSS 计算器，它会给我 CSS 精确的属性值，而不是保留 var(--root-value) .此外，如果可能，:root{} 设置将在不同的文件中。

所以我制作了这个 Web 应用程序模板，我将其用于几个不同的站点。我有几个 CSS 文件，其中第一个文件只有 :root{} 个值设置器，其余的使用

selector {
  property: var(--root-value);
}

格式。

我正在使用 VS Code，它是 HookyQR 的扩展 minify，后者又使用 Jakub Pawlowicz 的 clean-css 来缩小 CSS。

我一直在寻找 Google 更好的缩小器，甚至只是在使用 minify 缩小之前可以使用的计算器来计算这些值，但无济于事。

请指教

初始-setting.css

:root {
    /* COLORS */
    --bg-color: #fff;
    --main-color: #913b86;
    --compl-color: #3b9146;
    --text-color: #666;

    /* DIMENSIONS */
    --navbar-height: 4em;

    /* SHOW/HIDE */
    --show-sidebar: block; /* block for true, none for false */
}

style.css

.header-navigation>ul>li {
    height: var(--navbar-height);
    line-height: var(--navbar-height);
}

.header .mobi-toggler:hover {
    color: var(--bg-color);
    background: var(--main-color) url(../img/icons/toggler.png) no-repeat 6px -28px;
    border-color: var(--main-color);
}

现在计算后我想得到

style.c.css

.header-navigation>ul>li {
    height: 4em;
    line-height: 4em;
}

.header .mobi-toggler:hover {
    color: #fff;
    background: #913b86 url(../img/icons/toggler.png) no-repeat 6px -28px;
    border-color: #913b86;
}

然后缩小类似

style.c.min.css

.header-navigation>ul>li{height:4em;line-height:4em;}.header .mobi-toggler:hover{color:#fff;background:#913b86 url(../img/icons/toggler.png) no-repeat 6px -28px;border-color:#913b86}

或者直接在style.min.css.

中做同样的事情

Answer 1

您需要一个 CSS 编译器。

我会建议 Stylus 因为它有灵活的语法（你甚至可以用同样的方式写 CSS ），但是你可以访问一个叫做 variables 这正是您要找的东西。

您可以通过 Stylus 或 Sass（根据您的选择）设置它们，并编译变量以在编译时计算，您将得到与您想要的相同的结果。

示例：

$bg-color = #fff;
$main-color = #913b86;
$compl-color = #3b9146;

div {
  color: $main-color;
}

是否有 css 缩小器从 :root {}（可能来自不同的文件）计算变量？

Is there a css minifier that calculates variables from :root {} (possibly from a different file)?

css

css-variables