停止 SASS 编译出 CSS 中的尾随空格

Question

我正在尝试通过特定于浏览器的 CSS hack 来针对 IE 8 和 9，如 here 所示。但是，我使用的是 SASS（特别是 WebCompiler Visual Studio 扩展），它编译出分号之前的尾随空格。因此

.class{ display: none \ ;}

变成

.class { display: none \;}

并破解破解。有什么办法可以解决这个问题吗？

Answer 1

我建议在 html 中使用 conditional comments 定位，如下所示：

<!--[if IE 8]>            <html class="ie8"> <![endif]-->
<!--[if IE 9]>            <html class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]> <html>             <![endif]-->

在CSS中：

.class {display: block;}
.ie8 .class {display: none;}
.ie9 .class {display: none;}

但是如果你想保持更干净的 html 和更小的 css，你可以使用一些 javascript 库来针对特定的浏览器，比如 DetectJS将浏览器名称和版本放在 html 标签中作为 class，为每个浏览器生成单独的样式表，然后在脑海中调用它们：

<!--[if IE 8]>
    <link rel="stylesheet" type="text/css" href="ie8.css" />
<![endif]-->

<!--[if IE 9]>
    <link rel="stylesheet" type="text/css" href="ie9.css" />
<![endif]-->

请记住，IE10+ didn't accept conditional comments。

Answer 2

如果您需要 space，您可以连接一个空字符串。

SASS:

.class{ display: none \ +'';}

输出：

.class {
  display: none \ ;
}

停止 SASS 编译出 CSS 中的尾随空格

Stop SASS from compiling out trailing spaces in CSS

css

sass

web-compiler