Question

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

.klass {
  color: green;

  & + & {
    color: red;        
  }
}

但是，当嵌套类时，这会失败。小提琴here。

.container {
  .klass {
    color: green;

    // v1: fails
    & + & {
      color: red;
    }

    // v2: fails
    & + .container .klass {
      color: red;
    }

    // v3: succeeds
    & + .klass {
      color: red;
    }
  }  
}

是否存在不涉及重复非嵌套父选择器的解决方案？

Answer 1

正如您所说，您正在引用（整个）父选择器：

因此，.container还包括您的.container .klass + .container .klass：输出将是：

.klass

你可以这样做，取消你的public class Recipient { public string address { get; set; } } public class RootObject { public List<Recipient> recipients { get; set; } }：

http://codepen.io/anon/pen/RVNrKj?editors=0100#anon-login

Answer 2

我想您希望此解决方案将该类用作变量。我认为最好的解决方案是你说& + .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;
}

SCSS - 嵌套类中的双符号

2 个答案: