css - 在某些情况下， `!important` 之前的空格是否重要？如果是，什么时候？为什么？

Question

我一直在试验 scssphp ，一个 PHP SCSS 编译器，特别是它的压缩格式化程序。

这输出类似(注意额外的空格和闭花括号前的分号)

.navbar{margin-bottom  :0px !important;margin-top    :4px;}

因此我想到了实现这个小修改来削减生成代码的一些位。

^{我知道这没什么意义，因为我最多只能节省一些百分比；我正在删除低熵信息，这意味着一旦我对它进行 gzcompress，节省的空间会更小；然后必须维护修改。但这似乎很容易，也很无害，我……有点为了好玩。}

4225    public function format($block) {
4226        ob_start();
4227        this->block($block);
4228        $out = ob_get_clean();
4229---     return $out;                        // OLD
4229+++     return $this->postprocess($out);    // NEW
4230    }

后处理函数在父格式化程序上是虚拟的，如上:

4232    protected function postprocess($text) {
4233        return $text;
4234    }

...在 scss_formatter_compressed 中我执行了一些替换:

+++ from line 4343:

protected function postprocess($text) {
    $xlat = array(
        '#\\s+(:\\d)#'          => '\\1',
        '#;}#'                  => '}',
        '#\\s+(!important)#'    => '\\1', 
    );
    return preg_replace(
        array_keys($xlat),
        array_values($xlat),
        $text);
} 

现在的输出是:

.navbar{margin-bottom:0px!important;margin-top:2px}

...对于简单的 SCSS，它是有效的。我已经在一个庞大而复杂的 SCSS 层次结构上对其进行了测试，但有些元素会损坏。

我感觉它涉及!important 子句。我做了一个不太广泛的研究，发现 this在 YUI-compressor 网站上，他们一方面得出结论

@tml @namanyayg Could you provide any examples where stripping a space before '!important' leads to a broken styling?

We got the similar request in https://github.com/GoalSmashers/clean-css but without a test case it's not possible to verify if you made a mistake or if there is a very specific case where the space has to be there.

According to our tests it is OK to get rid of it. What's more such code has been used in production for couple years now without any issues.

另一方面，OP 有一些问题，它们似乎与 !important 之前的空格有关。

现在，如果这是一个 CSS 标准问题，我想修正我对 scssphp 的看法；如果是那个 SCSS 的问题，我当然希望我的 SCSS 文件得到修复。考虑到相关文件夹的庞大规模和复杂性，我想在深入研究其未知深度之前先在这里提问。

Answer 1

不需要空格。根据CSS syntax ,

4. While the current input token is anything other than an <EOF-token>, append it to the declaration’s value and consume the next input token.
5. If the last two non-<whitespace-token>s in the declaration’s value are a <delim-token> with the value "!" followed by an <ident-token> with a value that is an ASCII case-insensitive match for "important", remove them from the declaration’s value and set the declaration’s important flag to true.