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

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

更新

我知道各种解决方法，例如使用@ mixin代替。我只是想知道是否有什么我想念SASS，或者有人能告诉我为什么这是？因为在我看来它似乎是一种错误。

Answer 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，您可以始终确保您的样式以.ie-lt8为前缀，通过制作如下的mixin：

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

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

哪个将输出相同的css，但允许每次在某些上下文中包装IE7特定样式，这对于读取代码的任何人都有意义。

SASS复制嵌套选择器

1 个答案: