SASS 3.2媒体查询和Internet Explorer支持

Question

我最近在一个项目中使用@content块在SASS3.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提供一个不灵活的站点。

对于如何最好地组织这些文件，或者更好的解决方案，您有什么想法吗？

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

我在很多工作中使用较少的文件，但在较大的项目中，有许多人跨文件工作，我不喜欢使用断点文件，例如1024.less。

我和我的团队使用模块化方法，例如header.less，它只包含头部的所有代码，包括相关的断点。

为了解决IE问题(我们在企业环境中工作)，我使用以下方法：

@media screen\9, screen and (min-width: 40em) {
    /* Media queries here */
}

媒体查询中的代码总是由IE7或更少的人执行。IE9及以上版本遵守媒体查询，就像一个正常的浏览器应该遵守的那样。问题出在IE8上。要解决此问题，您需要使其行为类似于IE7

X-UA-Compatible "IE=7,IE=9,IE=edge"

我发现如果在HTML的元标记中设置，这并不总是有效的，所以使用服务器头来设置它。

看这里的要点：https://gist.github.com/thefella/9888963

让IE8表现得像IE7并不是一个适用于所有人的解决方案，但它符合我的需求。

Answer 3

到目前为止，我所见过的实现这一点的Jake Archibald has the best technique。该技术自动为IE创建一个单独的样式表，在媒体查询中具有所有相同的样式，但没有媒体查询本身。

如果你有兴趣使用它，我还致力于将这项技术内置到流行的breakpoint extension for Sass中！