SASS 3.2媒体查询和Internet Explorer支持

Question

我最近使用SASS 3.2 在我正在研究的项目中使用块实现了这种技术@content,我刚刚开始需要支持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提供一个非灵活的站点.

关于如何最好地组织这些文件或更好的解决方案的任何想法？

Answer 1

您可以为IE <9生成一个单独的样式表,其中包含普通表单所具有的所有内容,但基于设置的宽度进行平面化的媒体查询.

这里有完整的解释http://jakearchibald.github.com/sass-ie/,但基本上你有这个混音:

$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';

这只是导入所有内容,但在给定假宽度为65em的情况下展平媒体查询块.

Answer 2

我使用了一个CSS3 Mixin，它有一个用于 IE 过滤器的变量。您可以通过使用全局变量 $forIE 或其他变量来执行类似的操作，将媒体查询混合包装在 if 中，然后生成带或不带查询的样式表。

@if $forIE == 0 {
    // Media Query Mixin
}

或者使用 @if 导入第三个 scss (_forIE.scss?)，它将覆盖 IE 特定样式的内容。