Sass 中的 IE 条件答案

【问题标题】：IE Conditional in SassSass 中的 IE 条件
【发布时间】：2014-04-15 20:25:19
【问题描述】：

问题

我使用 Paul Irish 的 IE 条件注释技巧来定位不同版本的 IE。在 sass 中，当嵌套在另一个类中时，我如何应用这些类中的一个。

.container{
    // I need to put a ie8 specific style here which is a .ie8 class applied to the body
}

如果可能的话，我想避免这样做（能够将属性保持在一起很好）：

.container{}
.ie8{
    .container{}
}

这可能吗？

【问题讨论】：

【解决方案1】：

我相信这就是您正在寻找的 - 使用 SASS's parent selector "&"，您可以这样做：

.container {
    .ie8 & {
        // ie8 specific styles here
    }
}

【讨论】：

【解决方案2】：

我有点不清楚你具体要做什么。但是，如果您正在尝试做我认为您正在尝试做的事情，那么您可以使用变量。

例如，假设您只想在 IE 中将字体颜色设为红色。你可以做这样的事情。虽然我不知道在这个用例中使用 SASS 会有什么好处，除非你当然想尝试做一些不同的事情。

SASS： 您可以在以下位置进行测试： http://sassmeister.com/

$ieEightAndNine: "\0/";
.container {
   color:unquote(red + $ieEightAndNine);
   width:100px;
   height:100px;
}

CSS：

.container {
  color: red\0/;
  width: 100px;
  height: 100px;
}

在 Chrome 和 IE 中测试：

http://jsfiddle.net/3G48v/

【讨论】：

嗨 Kris，我尝试了您的解决方案，它运行良好，但令我失望的是它是如何工作的，我的意思是当我编写 Sencha Touch 应用程序时，甚至在我们打开网页之前和之后都会生成 CSS它没有 sass 文件的作用，但是这个解决方案是如何工作的，取决于浏览器。
@kapilchhattani，基本上它可以工作，因为 IE 8 和 9 允许字符并且仍然会处理 css，而其他浏览器不会。在我看来，hack 并不理想，如果需要特定的 IE 定位，我会使用条件语句。这是一些阅读... evotech.net/blog/2007/04/ie7-only-css-hacks .. 和 .. paulirish.com/2009/browser-specific-css-hacks
非常感谢，我会浏览链接的。