1

我正在将 SASS 用于一个项目，到目前为止我对它非常满意。但是，我有一些代码只能用于 IE 7 及以下版本，使用类名.ie-lt8。但是当我在 SASS 中扩展该选择器时，使用嵌套选择器创建多个选择器。

示例（display: inline-block为 IE 扩展代码）：

SASS

/* My extension code */
.ie-lt8 %ie-inline-block {
    display: inline;
    zoom: 1;
}

/* I want the li to be inline-block */
#my-ul li {
    display: inline-block;
    @extend %ie-inline-block;
}

CSS 制作

/* My extension code */
.ie-lt8 #my-ul, #my-ul .ie-lt8 li {
    display: inline;
    zoom: 1;
}

/* I want the li to be inline-block */
#my-ul li {
    display: inline-block;
}

一般来说，这很好，但#my-ul .ie-lt8 li我有点担心。在此示例中，这没关系，因为代码与两个选择器都可以正常工作（提到的选择器不存在）。但是，如果我有另一个选择器确实重要的代码，那么这会导致问题。

一个思想的例子：

SASS

/* I want the div to get a red border, 
   but the div inside .container to have a green border */
#myid .container div { border: 5px dotted green; }
#myid div {
    @extend %red-border;
}

/* My extension code */
.container %red-border {
    border: 1px solid red;
}

它会产生的 CSS

/* I want the div to get a red border, 
   but the div inside .container to have a green border */
#myid .container div { border: 5px dotted green; }

/* My extension code */
.container #myid div, #myid .container div {
    border: 1px solid red; /* [OVERRIDE OF THE BORDER] */
}

我的问题是；有没有办法让 SASS 只采用初始选择器，而不从嵌套选择器创建多个选择器（一句话中有很多选择器）？

我为这个问题尝试了谷歌，但我发现很难找到任何文章/博客/等。关于这个问题。

更新

我知道各种解决方法，例如改用@mixin。我只是想知道我是否错过了关于 SASS 的东西，或者是否有人可以告诉我这是为什么？因为在我看来，这是一个错误。

4

1 回答 1

1

我的答案是在SCSS - 不是SASS所以你必须转换......

对于这样的浏览器定位，我建议使用 mixins，此外 - @mixin 中的 @content 以实现您想要的结果。它还设置了一组更易于理解的规则与上下文。

对于您的具体示例，它就像将您的内联块修复移动到一个 mixin 而不是仅声明为一个类一样简单。

@mixin ie7-inline-block {
    display: inline;
    zoom: 1;
} 

#my-ul li { 
    display: inline-block; 
    .ie-lt8 & {
        @include ie7-inline-block;
    }
}

甚至比这更好的是，通过使用@content，您始终可以通过像这样制作一个 mixin 来确保您的样式以 .ie-lt8 为前缀：

@mixin ie7 {
    .ie-lt8 & {
        @content;
    }
}

#my-ul li {
    display: inline-block;
    @include ie7 {
        display: inline;
        zoom: 1;
    }
}

这将输出相同的 css，但允许您的 IE7 特定样式每次都在某些阅读您的代码的人都有意义的上下文中进行包装。

于 2013-01-02T20:00:31.283 回答