CODEWITHSUNDEEP
sass
dyer
dyer

Reputation: 284

SCSS - Double ampersand in nested class

In the SASS processor, the & references the parent selector in a nested rule. So I can do something like this:

.klass {
  color: green;

  & + & {
    color: red;        
  }
}

However, that fails when the class is nested. Fiddle here.

.container {
  .klass {
    color: green;

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

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

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

Is there a solution that doesn't involve repeating the non-nested parent selector?

Upvotes: 1

Views: 1176

Answers (2)

llobet
llobet

Reputation: 2790

I guess that you want this solution to use the class as a variable. I think that the best solution is the one you say & + .klass but if you really don't want to reference it in the mixin you have to repeat code out of it. One soluton could be this one:

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

And this outputs:

.container .klass {
  color: green;
}
.container .klass + .klass {
  color: red;
}

Upvotes: 1

Paul Melero
Paul Melero

Reputation: 1395

As you said, you are referencing the (whole) parent selector:

So, that & includes also your .container: Output would be:

.container .klass + .container .klass

You can do that, unnesting your .klass:

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

Upvotes: 1

Related Questions