CODEWITHSUNDEEP
sass
s.k.paul
s.k.paul

Reputation: 7301

Reverse the nesting order in sass

My sass -

.form-control{
   .label{
        //reversing the nesting order:
       .lg & {  

       }
   }
}

produces css -

.lg  .form-control .label {

}

But I would like to have in css -

.lg .label {

}

or//
.form-control .lg .label {

}

Any help?

Upvotes: 0

Views: 375

Answers (1)

Simplicius
Simplicius

Reputation: 2095

You can't, that's what nesting in SASS is about.

So instead, write this:

.form-control{
   .label{
       .lg & {  
         // really specific styling
       }
   }
}

And this:

.lg .label {
  // more general styling
}

Combined that can become powerful. Too much nesting will always end up with too specific styling rules and usually there's more of a down side to it, as it being really helpful.

Note: as mentioned you can use the @at-root directive, to avoid that issue. @at-rootapplied on a children will by default skip the parent and target the root.

Like this:

.item {
    color: #333;

    @at-root {
        .item-wrapper {
            color: #666;

            img {
                width: 100%;
            }
        }
    }
    
    .item-child {
        background-color: #555;
    }
}

Will compile to:

.item {
  color: #333;
}
.item-wrapper {
  color: #666;
}
.item-wrapper img {
  width: 100%;
}
.item .item-child {
  background-color: #555;
}

By using with or without you can either add or remove specific rules. Here's the documentation.

Upvotes: 1

Related Questions