停止编译CSS尾部空格的SASS

我试图通过浏览器特定的CSS黑客攻击IE 8 & 9，如演示here。但是，我使用SASS（特别是WebCompiler Visual Studio扩展），它在分号之前编译出尾部空格。因此停止编译CSS尾部空格的SASS

.class{ display: none \ ;}

成为

.class { display: none \;}

，并打破了黑客攻击。有什么办法可以解决这个问题吗？

来源

2016-07-29 Timestretch

你需要经常重新编译SASS？我会说，采取由此产生的CSS，手动替换空间，并使用，而不是SASS。 –

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

SASS：

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

输出：

.class { 
    display: none \ ; 
}

来源

2016-08-01 06:48:09 blonfu

我建议用conditional comments目标在HTML这样的：

<!--[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标签中作为类，为每个浏览器生成分离的样式表，比在头部调用它们：

<!--[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。

来源

2016-07-30 17:35:38

虽然我很欣赏这种做事方法，但在我工作的环境中，我需要避免添加额外的样式表，特别是对于一行css。 – Timestretch

因此，您可以使用js将浏览器信息添加到正文，然后将'.ie8 .class，.ie9 .class {display：none;}'放入您现有的样式表文件中。 –

停止编译CSS尾部空格的SASS

回答

相关问题