使用SASS将IE8样式分隔为单独的样式表?

时间:2014-05-26 04:21:55

标签: internet-explorer-8 sass stylesheet

我有一个SASS mixin rem(),它将像素单位值转换为rems,但包括IE8的px后备。例如,调用以下内容:

@include rem((padding: 15px));

会生成如下内容:

padding: 15px;
padding: 1.071rem;

问题是 - 对于现代浏览器,我不想包含px后备,因为它每次使用rem()mixin时都会添加不必要的CSS行。所以我的问题是:

问题: SASS(或SASS与其他东西一起使用)是否有办法将每个px后备分隔为单独的ie样式表(例如,“ie-8.css”)?

1 个答案:

答案 0 :(得分:-1)

我不认为单独使用SASS可以分割SASS输出。您可能会编写一个时髦的小程序,扫描您的SASS以查找某些选择器,并相应地处理输出,但这超出了我的知识范围。

值得考虑后备选择器对性能的影响有多大。加载时间未使用的css选择器have minimal impact。另一方面,对于IE8样式表的额外http请求,以及在基本样式加载后应用该样式表的时间,我认为是一项要求更高的任务。这对您来说是否有问题取决于您支持的IE8用户数量。

中间道路可能是应用IE-specific classes to your <html> tag或容器,并改变你的mixin,以便仅在条件类生效时应用后备。

HTML

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

SASS

@mixin rem($padding) {
    .ie8 & {
        padding: $padding;
    }
    padding: //calculate your rem value, or vice versa
}

我已经整理了一些jsfiddle来演示混音。