css - SASS 复制嵌套选择器

Question

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

示例(为 IE 扩展 display: inline-block 代码):

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 只采用初始选择器，而无需从嵌套选择器(一个句子中有很多选择器)创建多个选择器？

我尝试使用 gooling 解决这个问题，但我发现很难找到任何文章/博客/等。关于这个问题。

更新

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

Answer 1

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

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

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

@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 特定样式，这对阅读您的代码的任何人都有意义。