SASS 3.2 媒体查询和 Internet Explorer 支持

我最近实施了这项技术 http://thesassway.com/intermediate/responsive-web-design-in-sass-using-media-queries-in-sass-32与SASS 3.2一起使用@content我一直在做一个项目，现在我需要添加对 IE7 和 8 等旧版浏览器的支持。

Example:

.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

完整解释在这里http://jakearchibald.github.com/sass-ie/ 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';

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