Sass SCSS-嵌套类中的双安培和
在SASS处理器中,Sass SCSS-嵌套类中的双安培和,sass,Sass,在SASS处理器中,&引用嵌套规则中的父选择器。所以我可以这样做: .klass { color: green; & + & { color: red; } } 但是,当类嵌套时,这将失败。小提琴 是否有一种解决方案不涉及重复非嵌套父选择器?正如您所说,您正在引用(整个)父选择器: 因此,&还包括您的.container:输出将是: .container.klass+.container.klass 您可以这样做,取消对.klass的测试:
&
引用嵌套规则中的父选择器。所以我可以这样做:
.klass {
color: green;
& + & {
color: red;
}
}
但是,当类嵌套时,这将失败。小提琴
是否有一种解决方案不涉及重复非嵌套父选择器?正如您所说,您正在引用(整个)父选择器: 因此,
&
还包括您的.container
:输出将是:
.container.klass+.container.klass
您可以这样做,取消对.klass的测试:
我猜您希望此解决方案将类用作变量。我认为最好的解决方案是你说的&+.klass
,但是如果你真的不想在mixin中引用它,你必须重复代码。一种解决方案可能是:
@mixin nested($type, $selector){
@if $type == 'original'{
#{$selector}{
@content
}
}
@if $type == 'sibling'{
& #{$selector} + #{$selector}{
@content
}
}
}
.container{
@include nested('original','.klass'){
color:green;
}
@include nested('sibling','.klass'){
color:red;
}
}
这就产生了:
.container .klass {
color: green;
}
.container .klass + .klass {
color: red;
}
它很难看,但它回答了我的问题。谢谢
.container .klass {
color: green;
}
.container .klass + .klass {
color: red;
}