Css SASS复制嵌套选择器

Css SASS复制嵌套选择器,css,sass,less,Css,Sass,Less,我正在为一个项目使用SASS,到目前为止,我对它非常满意。 但是,我有一些代码应该只针对IE7及以下版本提供,使用类名.IE-lt8。但当我在SASS中扩展该选择器时,我使用嵌套选择器创建了多个选择器 示例(扩展显示:IE的内联块代码): 无礼 /*我的扩展代码*/ .ie-lt8%ie内联块{ 显示:内联; 缩放:1; } /*我希望li是内联块*/ #我的ulli{ 显示:内联块; @扩展%ie内联块; } CSS制作 /*我的扩展代码*/ .ie-lt8#我的ul#我的ul.ie-lt8

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

示例(扩展
显示:IE的内联块
代码):

无礼

/*我的扩展代码*/
.ie-lt8%ie内联块{
显示:内联;
缩放:1;
}
/*我希望li是内联块*/
#我的ulli{
显示:内联块;
@扩展%ie内联块;
}
CSS制作

/*我的扩展代码*/
.ie-lt8#我的ul#我的ul.ie-lt8 li{
显示:内联;
缩放:1;
}
/*我希望li是内联块*/
#我的ulli{
显示:内联块;
}
一般来说这很好,但是我的ul.ie-lt8 li有点让我担心。在本例中,代码可以同时使用两个选择器(前面提到的选择器不存在)。但是如果我有另一个选择器很重要的代码,那么这将导致一个问题

一个思想示例:

无礼

/*我希望div有一个红色边框,
但里面的div.container必须有绿色边框*/
#myid.container div{边框:5px点绿色;}
#myid分区{
@延长%红色边框;
}
/*我的分机码*/
.容器%红色边框{
边框:1px纯红;
}
它将产生的CSS

/*我希望div有一个红色边框,
但里面的div.container必须有绿色边框*/
#myid.container div{边框:5px点绿色;}
/*我的分机码*/
.container#myid div,#myid.container div{
边框:1px纯红色;/*[边框覆盖]*/
}
那么我的问题是,;有没有一种方法可以使SASS只接受初始选择器,而不从嵌套选择器(一句话中有很多选择器)创建多个选择器

我试着用谷歌搜索这个问题,但我发现很难找到任何关于这个问题的文章/博客/等等

更新


我知道各种解决方法,比如使用@mixin。我只是想知道我是不是错过了一些关于SASS的东西,或者是否有人能告诉我这是为什么?因为在我看来这是一种错误。

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

对于这样的浏览器目标,我建议使用mixin,并且在@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 ie7 {
    .ie-lt8 & {
        @content;
    }
}

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

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

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

对于这样的浏览器目标,我建议使用mixin,并且在@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 ie7 {
    .ie-lt8 & {
        @content;
    }
}

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

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

为什么不扩展完整的选择器(即
.ie-lt8%ie内联块
)?好吧,让它更容易。当我编写代码时,会出现更多的内联块元素,然后我可以只包含
@extend%ie内联块块到这些声明,而不是每次都必须滚动到文档中的另一个位置。使用SASS这样的预编译器的原因之一应该是为了让这些琐碎的事情变得更容易。对吗?为什么不扩展完整的选择器(即
.ie-lt8%ie内联块
)?好吧,让它更容易。当我编写代码时,会出现更多的内联块元素,然后我可以只包含
@extend%ie内联块块到这些声明,而不是每次都必须滚动到文档中的另一个位置。使用SASS这样的预编译器的原因之一应该是为了让这些琐碎的事情变得更容易。对吧?嗯。。。我想你把这里的事情弄糊涂了:SCSS就是SASS。scss只是SASS用于文件的扩展,它必须编译。也就是说:是的,你可能是对的,但我不想在最终的.css结果文件中添加太多重复的代码。@Tokimon.sass与.scss不同-它们是两种不同的语法。它们都使用“Sass”编译器,但它们是不同的语言规范。我只是说我的代码示例是使用.scss语法编写的。在sass-lang.com中,他们将其称为速记方法,因此我仍然认为它是相同的,但由于其速记语法的不同,其语法有所不同。。。我想你把这里的事情弄糊涂了:SCSS就是SASS。scss只是SASS用于文件的扩展,它必须编译。也就是说:是的,你可能是对的,但我不想在最终的.css结果文件中添加太多重复的代码。@Tokimon.sass与.scss不同-它们是两种不同的语法。它们都使用“Sass”编译器,但它们是不同的语言规范。我只是说我的代码示例是使用.scss语法编写的。在sass-lang.com中,他们提到了它