7

我最近使用 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 分配 940 像素（或任何最大宽度）的布局和样式。通过像这样在 SASS 3.2 内嵌样式中嵌套样式，它消除了对单独的部分样式表的需要，但完全搞砸了我为 IE 加载样式的方式。

关于如何解决这个问题的任何想法或解决方案？我可以使用诸如 respond.js 之类的 polyfill 来强制 IE 使用媒体查询，但我更愿意只为 IE 提供一个不灵活的站点。

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

4

5 回答 5

8

您可以为 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%;
}

这将在 inside all.scss，它将all.css与媒体查询一起编译。但是，您还有一个附加文件all-old-ie.scss：

$fix-mqs: 65em;
@import 'all';

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

于 2013-01-03T14:48:13.900 回答
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 一样运行并不是一个适合所有人的解决方案，但它适合我的需要。

于 2014-03-31T09:59:21.367 回答
1

Jake Archibald 拥有迄今为止我所见过的最好的技术来实现这一点。这种技术会自动为 IE 创建一个单独的样式表，在您的媒体查询中具有所有相同的样式，但没有媒体查询本身。

如果您有兴趣使用它，我还努力将这种技术内置到Sass 的流行断点扩展中！

于 2013-01-03T14:43:20.600 回答
1

如果您想将所有内容集中在一个屋檐下，并且对旧的浏览器访问者只有一个 http 请求，您可以执行以下操作

设置你对 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; }
}

这将创建一个最小宽度媒体查询并将您的 px 值 ($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

于 2013-01-21T15:37:16.677 回答
0

我使用的CSS3 Mixin有一个用于 IE 过滤器的变量。您可以通过使用全局变量 $forIE 或其他东西来做类似的事情，将媒体查询 mixin 包装在 if 中，然后生成带有或不带查询的样式表。

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

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

于 2013-01-03T14:41:56.270 回答