CODEWITHSUNDEEP
csssassless
Kushal Jayswal
Kushal Jayswal

Reputation: 933

SASS Ampersand – Chaining CSS class with the parent selector '&' like in LESS

LESS (CSS)

see in action

.app {
  #page {
    .inner {
      .left {
        &.padding-left-10px {
          padding-left: 10px;

          // rtl direction
          .rtl& {  //////////////////////////////////
            padding-left: 0;
            padding-right: 10px;
          }
        }
      }
    }
  }
}

Consider the line I have highlighted with ///.....

I want the same result in SASS (.scss). Is it possible?

Expected result should be:

.rtl.app #page .inner .left.padding-left-10px {}

and not

.rtl .app #page .inner .left.padding-left-10px {}

Thanks.

Upvotes: 2

Views: 1812

Answers (2)

Josh Crozier
Josh Crozier

Reputation: 241078

It looks like you are attempting to use the LESS feature where you can change the order of the selectors by using the parent selector. It isn't working as expected because that specific LESS feature isn't implemented the same way in SASS.

If you want the equivalent output code in SASS, then you can use the @at-root directive in order to scope the selector to the root. Then you would also need to use variable interpolation (i.e., .rtl#{&}) for the parent selector:

.app {
  #page {
    .inner {
      .left {
        &.padding-left-10px {
          padding-left: 10px;

          @at-root {
            .rtl#{&} {
              padding-left: 0;
              padding-right: 10px;
            }
          }
        }
      }
    }
  }
}

Which would compile to:

.app #page .inner .left.padding-left-10px {
  padding-left: 10px;
}
.rtl.app #page .inner .left.padding-left-10px {
  padding-left: 0;
  padding-right: 10px;
}

Upvotes: 3

Remco Abalain
Remco Abalain

Reputation: 98

Josh gave you an answer which will work, i guess. But I still wanna give you some advice and that is look into BEM, or someway. Nesting like this is really unnecessary.

Your code could be better for readability.

For example:

.padding {
     padding: 10px;
 }

 .padding--left { // This is a modifier for padding
     padding: 0 0 0 10px;
 }

 .padding--right { // This is a modifier for padding
     padding: 0 10px 0 0;
 }

 <div class="padding padding--left">Using it in a div</div>

You don't have to follow all the rules which are defined in BEM, but some are really nice to use.

Upvotes: 0

Related Questions