使用 output_style = :compressed 中断 Susy 布局答案

【问题标题】：Using output_style = :compressed breaks Susy layout使用 output_style = :compressed 中断 Susy 布局
【发布时间】：2013-08-08 06:14:41
【问题描述】：

我知道使用不同的 CSS 压缩对网站结果没有任何影响（除了较小的文件大小），但是当我将 Compass 设置为输出压缩的 CSS 时，我的网站完全崩溃了。

我不确定是什么导致了中断，但我相信是 Susy 与其他 Compass 函数（如 sprite 或 base64 内联图像函数）发生冲突。

为了不在本题中粘贴过多代码，这里有两个链接进行演示（同一来源，生成时间间隔秒）

在 config.rb 中使用 output_style = :expanded（一切正常）： http://davidpaulsson.se/expanded/

在 config.rb 中使用 output_style = :compressed（布局中断）： http://davidpaulsson.se/compressed/

我正在使用 Jekyll 生成静态文件，源文件在 Github 上可用：https://github.com/davidpaulsson/davidpaulsson.se/tree/master/sass

【问题讨论】：

请通过sassbin.com 分享您的 SASS 源代码（编辑您的帖子并在此处写下后续评论以供我注意）。
您必须提供足够的代码 - 在问题中 - 来演示问题。将代码放入场外演示（如 JSfiddle 或 Codepen）是一种不错的选择，可以帮助人们更轻松地理解您的问题。
我实际上并没有看到这两个演示之间有任何区别。它是特定于浏览器的吗？
@EricMeyer：是的，我现在知道这是一个浏览器问题。我使用 Chrome 版本 28.0.1500.95，这就是我看到问题的地方。在 Firefox 中它可以工作。但不是在 Safari 中，所以 webkit 的处理方式有所不同。
@Andrey'lolmaus'Mikhaylov：这是 SASS 代码：github.com/davidpaulsson/davidpaulsson.se/tree/master/sass

【解决方案1】：

问题在于这段代码（_general.scss, line 208）：

@media screen and (max-width: 769px) {  
    -webkit-text-size-adjust:none;
}

这里有一个没有选择器的 CSS 声明，这是无效的。

SASS 应该产生了错误。也许它没有这样做是因为 @media 包装器看起来有点像选择器。

我不确定这个 CSS 属性有什么作用，请尝试将其应用于 html 或 *：

@media screen and (max-width: 769px) {
    html {
        -webkit-text-size-adjust:none;
    }
}

【讨论】：