我最近使用@content块在我正在进行的项目中使用SASS 3.2实现了
this technique,我刚刚到了需要支持IE7和8等旧版浏览器的地步.
例：
.overview {
padding: 0 0 19px;
@include respond-to(medium-screens) {
padding-top: 19px;
} //medium-screens
@include respond-to(wide-screens) {
padding-top: 19px;
} //medium-screens
}
它们都不支持媒体查询,而且我经常在将媒体查询分成单独的部分文件(例如_320.scss,_480.scss和我的浏览器)时为这些浏览器提供所有样式来处理这个问题. IE样式表加载它们如下：
@import 320.scss; @import 480.scss; etc.
这将加载所有样式,并始终为IE7 – 8分配940px(或任何最大宽度)布局和样式.通过像这样在SASS 3.2中嵌套样式,它不需要单独的部分样式表,但完全搞砸了我为IE加载样式的方式.
关于如何打击这个的任何想法或解决方案？我可以使用诸如respond.js之类的polyfill来强制IE使用媒体查询,但更愿意只向IE提供一个非灵活的站点.
解决方法
您可以为IE< 9生成一个单独的样式表,其中包含普通工作表所具有的所有内容,但基于设置的宽度,可以使用展平的媒体查询. 这里有完整的解释
http://jakearchibald.github.com/sass-ie/,但基本上你有这个mixin：
$fix-mqs: false !default;
@mixin respond-min($width) {
// If we're outputting for a fixed media query set...
@if $fix-mqs {
// ...and if we should apply these rules...
@if $fix-mqs >= $width {
// ...output the content the user gave us.
@content;
}
}
@else {
// Otherwise,output it using a regular media query
@media screen and (min-width: $width) {
@content;
}
}
}
你用的是这样的：
@include respond-min(45em) {
float: left;
width: 70%;
}
这将在all.scss中,它将使用媒体查询编译为all.css.但是,你还有一个额外的文件,all-old-ie.scss：
$fix-mqs: 65em; @import 'all';
