Kushal Jayswal Kushal Jayswal - 4 years ago 178
Less Question

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.

Answer Source

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;
}
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download