在某些情况下,`!important` 之前的空格是否重要?如果重要,那么什么时候重要?为什么?

2023-12-27

我一直在尝试scssphp http://leafo.net/scssphp/,一个 PHP SCSS 编译器,特别是它的压缩的格式化程序。

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

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

所以我想实现这个小修改从生成的代码中删除一些位。

I know it makes little sense, in that I will save at most some percents in size; and I'm removing low-entropy information, which means that once I gzcompress it, the savings will be even smaller; while the modification will then have to be maintained. But it seemed easy enough, and harmless enough, and I... sort of did it for the lulz.

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 https://github.com/yui/yuicompressor/issues/37在 YUI-compressor 网站上,一方面他们得出结论

@tml @namanyayg 你能提供任何删除空格的例子吗 在 '!important' 导致样式损坏之前?

我们收到了类似的请求https://github.com/GoalSmashers/clean-css https://github.com/GoalSmashers/clean-css但没有测试用例 无法验证您是否犯了错误或是否存在严重错误 空间必须存在的特定情况。

根据我们的测试摆脱它就可以了。何况还有这样的 代码已经在生产中使用了几年,没有任何 问题。

另一方面,OPhad一些问题,并且他们seemed与之前的空间相关!important.

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


不需要空间。根据CSS语法 http://www.w3.org/TR/css-syntax-3/#consume-a-declaration,

  1. 虽然当前输入令牌 http://www.w3.org/TR/css-syntax-3/#current-input-token除了 a 之外还有什么 http://www.w3.org/TR/css-syntax-3/#typedef-eof-token,将其附加到声明的值中并且消耗 下一个输入标记 http://www.w3.org/TR/css-syntax-3/#consume-the-next-input-token.
  2. 如果最后两个非 http://www.w3.org/TR/css-syntax-3/#typedef-whitespace-token声明值中的 s 是 a http://www.w3.org/TR/css-syntax-3/#typedef-delim-token带有值“!”随后是一个 http://www.w3.org/TR/css-syntax-3/#typedef-ident-token其值为ASCII 不区分大小写 http://www.w3.org/TR/css-syntax-3/#ascii-case-insensitive匹配“重要”,将它们从声明的值中删除并 设置声明的重要的标志为真。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

在某些情况下,`!important` 之前的空格是否重要?如果重要,那么什么时候重要?为什么? 的相关文章

  • 如何使整个跨度落入新行?

    这个片段显示了我想要的 http jsfiddle net 945Df 3 http jsfiddle net 945Df 3 div class sup strong a href Rosario Santa Fe Argentina a
  • 将特定字形与网络字体一起使用

    使用网络字体 我想使用字体功能设置 CSS 中的选项以及跨度类HTML 中 以便使用字体集中的特定替代字形 我需要以正确的语法使用哪些值 GID Unicode 才能定位特定的目标glyph内glyph备择方案 这些功能使用 OpenTyp
  • CSS 精灵按钮

    这些精灵按钮让我抓狂 我几乎可以让他们工作 但不完全是 我正在玩这个非常简单的精灵图像 我有一个 jsfiddle 项目 gt gt 这里 如果你想看的话 但如果你只想看一下 代码就在下面 http jsfiddle net jp2code
  • Quill 公开可用的 CSS

    我最初的目的是从 PrimeFaces TextEditor 组件输出的 HTML 生成 PDF 文件 而该组件又基于 免费开源 WYSIWYG 编辑器 Quill 为此 我需要获取 TextEditor 组件生成的 HTML 将其包含在
  • 编辑类名中带有空格的元素的 css 样式

    我正在创建一个 tumblr 我必须编写一个外部 CSS 文件 但我在编辑 post 元素的 css 样式时遇到问题 这是它的结构 li class post quote other code li 问题是类名中有空格 我如何创建一个 CS
  • TDD/测试 CSS 和 HTML? [关闭]

    Closed 这个问题需要多问focused help closed questions 目前不接受答案 有没有办法测试 CSS 和 HTML 例如 有时某些通知会受到某些 CSS 更改的影响 我不想每次进行更改时都手动测试所有通知 Tha
  • CSS3变换:悬停时翻译,带有过渡[重复]

    这个问题在这里已经有答案了 这应该很简单 我的 HTML 中有一堆锚点 如下所示 a href Link 1 a a href Link 2 a a href Link 3 a a href Link 4 a a href Link 5 a
  • 如何将 div 与其父级的顶部对齐,但保持其内联块行为?

    See http jsfiddle net b2BpB 1 http jsfiddle net b2BpB 1 问 如何让box1和box3对齐到父div的顶部boxContainer boxContainerContainer backg
  • 为什么网格项目不居中?

    由于某种原因 两个输入范围使网格中的前两项偏离中心 我假设这是因为它们的影子 DOM 样式 事实真的是这样吗 有谁知道为什么范围使项目 A 和 B 偏离中心 这是一个代码笔 https codepen io tOkyO1 pen QOeKL
  • 如何强制折断不可折断的字符串?

    我有一个根据数据库中包含的数据生成的 HTML 页面 数据库有时包含浏览器无法分解的长字符串 因为这些字符串不包含可分解的字符 空格 点 逗号等 有没有办法使用 html css 甚至 javascript 来解决这个问题 看到这个link
  • R Shinydashboard 自定义 CSS 到 valueBox

    我一直在尝试将 valueBox 的颜色更改为自定义颜色 超出 validColors 中可用的颜色 但一直无法这样做 我知道有一种方法可以使用标签来包含自定义 CSS 但是我无法将它们放在正确的位置 ui lt dashboardPage
  • 使用deployJava.runApplet来定位特定元素

    经过多年成功维护一个使用旧有的小程序 嵌入Java小程序的方法 我们无法捂住耳朵唱 啦啦啦 不再了 是时候使用 deployJava runApplet 当我使用点击处理程序触发此方法时 此处通过 jQuery 在按钮上使用事件侦听器 但这
  • 如何更改 Bootstrap 3 div 列顺序

    正在做我的第一个响应式设计 在 Bootstrap 3 中可能会出现类似的情况 在 lg 上更改此设置 a b c sm 上的这个 a c b 您可以使用两个 div 一个用于第一类型的布置 另一个用于第二类型的布置 第一个仅在 lg 中显
  • 如何在背景剪辑中包含文本装饰:文本;影响?

    我在用 webkit background clip text border and color transparent在锚标记上 下划线似乎永远不可见 我想要的是将文本装饰包含在背景剪辑中 这是我的CSS background clip
  • 如何将送货地址复制到帐单地址

    我想知道是否可以将送货地址复制到帐单地址 当用户单击与送货地址相同的复选框时 送货地址值将被复制到账单输入字段 我完成了大部分部分 但我不确定如何将选择菜单 状态 值复制到帐单地址 我真的很感谢任何帮助 My code document r
  • 覆盖并重置 CSS 样式:auto 或 none 不起作用

    我想覆盖为所有表定义的以下 CSS 样式 table font size 12px width 100 min width 400px display inline table 我有一个特定的表 其类名为 other 最后的餐桌装饰应该是这
  • Twitter 嵌入时间轴小部件

    我继续下载http platform twitter com widgets js http platform twitter com widgets js And the http platform twitter com embed t
  • 为范围旋钮 ionic-range 添加边框颜色

    我正在使用离子范围添加范围滑块 并想向范围旋钮添加边框 由于它的 ionic4 和范围旋钮是 Shadow dom 的一部分 我无法使用范围旋钮的 border 属性直接更改边框 我已附上我想要实现的图像 范围旋钮周围有白色边框 现有属性只
  • 三级十进制有序列表 CSS

    我有一个 html 中的三级有序列表 我想为其提供如下样式 1 Item 1 1 1 Item 2 1 1 1 Item 3 下一个 plunker 中有一个 html 示例 http plnkr co edit DqhZ5pJILTUHG
  • 闪亮井板宽度

    library shiny library shinydashboard ui lt dashboardPage dashboardHeader dashboardSidebar dashboardBody wellPanel tags d

随机推荐