Warning: file_get_contents(/data/phpspider/zhask/data//catemap/2/ionic-framework/2.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Sass SCSS-嵌套类中的双安培和_Sass - Fatal编程技术网

Sass SCSS-嵌套类中的双安培和

Sass SCSS-嵌套类中的双安培和,sass,Sass,在SASS处理器中,&引用嵌套规则中的父选择器。所以我可以这样做: .klass { color: green; & + & { color: red; } } 但是,当类嵌套时,这将失败。小提琴 是否有一种解决方案不涉及重复非嵌套父选择器?正如您所说,您正在引用(整个)父选择器: 因此,&还包括您的.container:输出将是: .container.klass+.container.klass 您可以这样做,取消对.klass的测试:

在SASS处理器中,
&
引用嵌套规则中的父选择器。所以我可以这样做:

.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;
}