CODEWITHSUNDEEP
sass
max
max

Reputation: 8687

SCSS ampersand operator

I'm migrating from LESS to SCSS.

In LESS I can do this:

.btn {
  a&.disabled,
  fieldset[disabled] a& {
    pointer-events: none;
  }
}

CSS result:

a.btn.disabled,
fieldset[disabled] a.btn {
  pointer-events: none;
}

What is the SCSS equivalent of that?

Upvotes: 3

Views: 1071

Answers (1)

Jakob E
Jakob E

Reputation: 4936

Try this:

SCSS:

.btn {
  //  move content out of `.btn` nesting 
  @at-root {
    //  use interpolation to `glue` a and & together 
    a#{&}.disabled,
    fieldset[disabled] a#{&} {
        pointer-events: none;
    }
  }
}

CSS Output:

a.btn.disabled,
fieldset[disabled] a.btn {
  pointer-events: none;
}

Upvotes: 3

Related Questions