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提供非灵活的网站。

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

- procload

---

你有没有找到答案？我有完全相同的问题。 - orourkedd

Answer 1

你可以为IE<9生成一个单独的样式表，其中包含普通表格的所有内容，但基于固定宽度的媒体查询已被展开。 完整解释请参见这里，但基本上你需要使用此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以展平媒体查询块。

- JaffaTheCake

Answer 2

我在很多工作中使用LESS，但对于涉及多个人跨文件工作的大型项目，我不喜欢使用断点文件，例如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一样运行并不适用于所有人，但它适合我的需求。

- thefella

---

这也可以使用 @media \0screen\,screen\9 {...}，它会将 CSS 应用于 IE8，而不必让它像 IE7 一样行为异常（来自 http://blog.keithclark.co.uk/wp-content/uploads/2012/11/ie-media-block-tests.php）。 - Luca

Answer 3

Jake Archibald目前为止是我见过最好的技术，用于实现这一点。该技术会自动为IE创建单独的样式表，其中包含所有媒体查询中的相同样式，但不包括媒体查询本身。

我还积极推广将此技术集成到流行的Sass断点扩展中，如果您有兴趣使用它！

- user1082754

Answer 4

如果您想将所有内容放在一个屋檐下，并且只为旧版浏览器访问者发出单个HTTP请求，您可以尝试以下操作： 设置初始的respondto mixin。

// initial variables set-up

$doc-font-size: 16;
$doc-line-height: 24;

// media query mixin (min-width only)

@mixin breakpoint($point) {
    @media (min-width: $point / $doc-font-size +em) { @content; }
}

这将创建一个最小宽度媒体查询，并将您的像素值($point)输出为em值。 从这里，您需要创建这个mixin。

@mixin rwdIE($name, $wrapper-class, $IE: true) {
  @if $IE == true {
      .lt-ie9 .#{$wrapper-class} {
        @content;
      }
    .#{$wrapper-class}  {
       @include breakpoint($name) {
         @content;
       }
    }
  }
  @else if $IE == false {
    .#{$wrapper-class}  {
      @include breakpoint($name) {
          @content;
      }
    }  
  }
}

如果你传递了这样一段Sass(SCSS)代码

@include rwdIE(456, test) {
  background-color: #d13400; 
}

它将返回此代码

.lt-ie9 .test {
  background-color: #d13400;
}

@media (min-width: 28.5em) {
  .test {
    background-color: #d13400;
  }
}

这将为您提供IE和“新浏览器”CSS在一个文件中。如果您编写-

@include rwdIE(456, test, false) {
  background-color: #d13400; 
}

你将会得到 -

@media (min-width: 28.5em) {
  .test {
    background-color: #d13400;
  }
}

希望这可以帮到你，我还在 http://codepen.io/sturobson/pen/CzGuI 这里放了一个 codepen。

- Stuart Robson

Answer 5

我使用一个CSS3 Mixin，其中包含IE过滤器的变量。您可以通过创建全局变量 $forIE 等方式做类似的事情，将媒体查询mixin放在if中并生成带有或不带查询的样式表。

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

或者使用@if导入第三个scss文件（_forIE.scss？），以覆盖IE特定样式。

- Brian