CODEWITHSUNDEEP
csssass
Yonatan Lev Ari
Yonatan Lev Ari

Reputation: 1

scss nesting syntax: nest with parent adjoin class

I want to output: .selector.another-selector .selector__block{some declaration} but i want to nest it:
I am using & at the end so I can nest it under __block, but how can I make it adjoin class with .selector?
code example:

.selector{
  &__block{
  // i want to put my .another-selector declaration here
  .another-selector &{ 
    //syntax issue
    //need to make it .selector.another-selector .selector__block
  }
}

thanks in advance.

Upvotes: 0

Views: 137

Answers (3)

Jakob E
Jakob E

Reputation: 4926

@Dejan.S I'm not a big fan of BEM (but that's another rant ;-). If however you are using BEM I think nesting will help to illustrate the hierarchy and what to expect

SCSS:

.selector {
    //  selector styles
    color: red;

    //  default selector block style 
    &__block { color: green; }

    //  selector variant selector block styles 
    &.foo &__block { color: blue;   }
    &.bar &__block { color: yellow; }
}

CSS Output:

.selector { color: red; }
.selector__block { color: green; }
.selector.foo .selector__block { color: blue; }
.selector.bar .selector__block { color: yellow; }

HTML:

<div class="selector">
    Selector  <!-- red -->
</div> 
<div class="selector">
    Selector  <!-- red -->
    <div class="selector__block">
        Selector Block  <!-- green -->
    </div>
</div>
<div class="selector foo">
    Selector  <!-- red -->
    <div class="selector__block">
        Selector Foo Block   <!-- blue -->
    </div>
</div>
<div class="selector bar">
    Selector  <!-- red -->
    <div class="selector__block">
        Selector Bar Block  <!-- yellow --> 
    </div>
</div>

Upvotes: 0

Dejan.S
Dejan.S

Reputation: 19128

I would suggest that you don't nest BEM at all. Just go with plain declarations for two valid reasons.

1) error tracking nested BEM is hard, let say you get a class from devtools that is .hero__heading. That will not match anything in your code when doing a search. Now the example above is not that hard to figure out anyway but inheriting a project with nested structure is a pain. I suggest reading Harry Roberts article on code smells in css

2) nesting like this will often complicate when wanting to override with other classes like in your case.

Consider this code:

.selector {
  background-color: deepskyblue;
}

.selector__block {
  color: lightblue;

  .another-selector & {
    color: lightcoral;
  }
}

Upvotes: 0

Thibault
Thibault

Reputation: 434

If you nest your selector, then it has to be in the .selector__block context (&).

You have 2 solutions here :

You can repeat the first selector, as such:

.selector {
  &__block {
      ...
      .another-selector.selector & { 
          // Here `&` means  `.selector__block`
      }
  }
}

You can nest differently:

.selector {
  &__block {
    ...
  }
  &.another-selector &__block { 
     // Here `&` means  `.selector`
  }
}

Maybe the second solution is better since it respects the inception rule and is less dependent of the DOM structure.

BTW, you can also try https://www.sassmeister.com/ to play with your selectors

Upvotes: 1

Related Questions