css - SASS 3.2 媒体查询和 Internet Explorer 支持

Question

我最近实现了 this technique SASS 3.2 在我一直从事的元素中使用 @content block ，我刚刚到了需要包括对旧版浏览器(如 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/ ，但基本上你有这个 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 的假宽度的情况下展平媒体查询 block 。