Question

我正在寻找一个CSS缩小器，或者也许只是CSS计算器，它将为我提供具有确切属性值的CSS，而不是保留var(--root-value)。此外，如果可能，:root{}设置将位于其他文件中。

因此，我制作了此Web应用程序模板，并将其用于一些其他站点。我有几个CSS文件，其中第一个仅包含:root{}个值的设置器，其余使用

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

格式。

我正在使用VS Code，它是minify的扩展名HookyQR，而扩展名又使用clean-css的{{1}}来缩小CSS。

我一直在Google中寻找更好的缩小器，甚至只是一个计算器，在用Jakub Pawlowicz进行缩小之前，我都可以使用它们来计算这些值，但无济于事。

请告知。

initial-setting.css

minify

style.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.c.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.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;
}

或直接在.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}中输入相同内容。

Answer 1

您需要CSS编译器。

我会建议Stylus，因为它具有灵活的语法（您甚至可以用编写CSS的相同方式来编写），但是您可以访问称为 variables 的东西，这就是确切的东西您正在寻找。

您可以仅使用Stylus或Sass（根据您的选择）进行设置，并编译变量以在编译时进行计算，结果将与您想要的相同。

示例：

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

div {
  color: $main-color;
}

是否有一个CSS压缩程序可以从：root {}（可能从其他文件）计算变量？

1 个答案: