Question

我正在使用SASS，Compass，Bourbon和Neat创建一个精彩的响应式网站。

然而，我突然意识到IE8（缺乏媒体查询支持）只会输出移动版本，因为我使用的是移动第一种方法。

有没有办法使用SASS自动为IE8生成样式，所有最大的媒体查询都被转换为默认值？我希望IE8只能获得完整的桌面外观。

我想避免使用像response.js这样的脚本，因为性能和维护都是如此。

解决方案：

我正在使用Compass和Bourbon SASS库。 Bourbon有一个media() mixin，我想用它。

继续下面的选定答案之后，我最终为波本威士忌提供的media() mixin创建了一个简单的包装mixin。

@mixin bp($bp) {

    @if $desktop-only {

        @content;

    }

    @else {

        @include media($bp) {

            @content;

        }

    }

}

在我的ie.scss文件（由Compass使用）中，我将$desktop-only变量设置为true。这将删除媒体查询本身，并简单地放置在查询中的属性中。因为它们的顺序稍后在编译的CSS中，所以它优先于仅移动设置，然后IE使用该样式。

它导致了一个略显臃肿的CSS fie，但它是值得的，因为它不需要额外的脚本来渲染桌面版本。

Answer 1

我自己为此写了一个解决方案。您只需要两个不同的CSS文件（一个用于现代浏览器，一个用于较旧的IE浏览器）和一个切割器mixin。

创建第二个SASS文件，Compass可以观看并调用类似oldIE.scss的文件。将原始SASS文件（styles.scss或其他）中的所有导入复制到此文件。然后在它们中添加一个新变量：$compile-IE。设置如下值：

styles.scss

$compile-IE: false;

@import "all your other imports"

oldIE.scss

$compile-IE: true;

@import "all your other imports"

Compass现在将为您创建两个不同的CSS文件。您可以将它们放在标记的HEAD中，如下所示：

<link type="text/css" href="styles.css" rel="stylesheet" media="all" />
<!--[if (gte IE 6) & (lte IE 8)]>
<link type="text/css" href="oldIE.css" rel="stylesheet" media="all" />
<![endif]-->

一旦你有两个文件，你可以开始用断点写SASS，这要归功于以下mixin：

// ----- Media-queries ----- // 
$breakpoints: S 480px, M 600px, L 769px;

@mixin bp($bp) {
// If compile-IE is true (IE8 <=) then just use the desktop overrides and parse them without @media queries
   @if $compile-IE {
      @content;
   }
   // If compile-IE is false (modern browsers) then parse the @media queries
   @else {
      @each $breakpoint in $breakpoints {
         @if $bp == nth($breakpoint, 1) {
            @media (min-width: nth($breakpoint, 2)) {
               @content;
            }
         }
      }
   }
}

调用mixin如下：

p {
   color: blue;
   font-size: 16px;
   @include bp(L) {
     font-size: 13px;
   }
}

现在，如果变量$compile-IE为false（对于现代浏览器），输出将是：

p {
  color: blue;
  font-size: 16px; }
  @media (min-width: 768px) {
    p {
       font-size: 13px; 
  } 
}

当变量$compile-IE为true时（对于较旧的IE版本），输出将为：

p {
  color: blue;
  font-size: 16px;
  font-size: 13px; 
}

因为在font-size: 13px之后解析font-size: 16px用于较大视口的样式（如bp L）将覆盖默认的移动样式。

希望这会对你有所帮助！：）

没有脚本的IE8首先支持移动的最佳方式？

1 个答案: