Question

我有一个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”）？

Answer 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来演示混音。

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

1 个答案: