在某些情况下，“！important”前的空格是否重要？如果是，何时？又为什么呢 [英] is a space before `!important` important in some cases, and if so, when? And why?

问题描述

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

I've been experimenting with scssphp, a PHP SCSS compiler, and specifically its compressed formatter.

这会输出类似（请注意，在封闭的花括号之前应留有多余的空格和分号。 ）

This outputs something like (notice the extra whitespaces and the semicolon before the closed curly brace)

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

，因此我想到了实现此小修改，以节省代码部分。

and so I thought of implementing this small modification to shave a few bits off the resulting code.

^{我知道这没有什么意义，因为我最多可以节省百分之几的大小；而且我正在删除低熵信息，这意味着一旦我对其进行压缩，节省的资金将更少。而修改则必须保留。但这似乎很容易，也足够无害，我...有点像傻瓜。}

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    }

后处理功能在上面的父格式化程序上是虚拟的：

The postprocessing function is dummy on the parent formatter, above:

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

...而在 scss_formatter_compressed 我执行一些替换：

...while in scss_formatter_compressed I perform some replacements:

+++ 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层次结构上对其进行了测试，并且某些元素中断了。

...and for simple SCSSs it works. I have tested it on a large and complicated SCSS hierarchy, and some elements break.

我对感觉涉及到！important 子句。我进行了不很广泛的研究，并在YUI压缩机网站上找到了 this ，他们一方面得出结论

I have the sensation that it involves the !important clause. I have done a not really extensive research, and found this on the YUI-compressor site, where on the one hand they conclude

@tml @namanyayg您能提供任何示例在'！important之前删除空格
的示例吗？会导致样式损坏？

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

我们在
中得到了类似的请求 https://github.com/GoalSmashers/clean-css ，但没有测试用例，则
无法验证您是否犯了错误或是否有非常多的
的具体情况是必须有空间。

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.

根据我们的测试，可以消除它。更重要的是，这种
代码已经在生产中使用了几年，而没有任何
问题。

另一方面，OP 有问题，它们似乎与之前的空格有关！重要。

On the other hand the OP had some problems, and they seemed to be related to a space before !important.

现在，如果这是CSS标准问题，我想修正对scssphp的看法；如果那是一个SCSS的问题，我当然希望修复我的SCSS文件。考虑到该文件夹​​的大小和复杂性，我想在深入了解其未打入深度之前先在这里询问。

Now if it is a CSS-standards issue I want to fix my take on scssphp; if it is a problem of that one SCSS, I of course want my SCSS files fixed. Given the sheer size and complexity of the folder in question, I thought to ask here before delving into its unplumbed depths.

推荐答案

否需要空间。根据 CSS语法，

1. 而当前输入令牌是< EOF-token> ，将其附加到声明的值中，然后使用
   作为下一个输入令牌。


2. 如果最后两个非< whitespace-token> 声明值中的s是< delim-token> 的值为！然后是
   < ident-token> 的值为 ASCII大小写不敏感
   匹配 important，将其从声明的值中删除，
   将声明的 important 标志设置为true。

1. 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.
2. 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.

这篇关于在某些情况下，“！important”前的空格是否重要？如果是，何时？又为什么呢的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！