是否有一个 css minifier 计算来自 :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 缩小之前使用来计算这些值，但无济于事。

请指教。

initial-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;
}