SCSS ampersand operator

Question

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?

https://stackoverflow.com/questions/26522554/how-to-convert-less-to-scss — Abhi, Aug 04 '17 at 14:54
Tried that. It compiles to `a &.disabled` and `fieldset[disabled] a &` which is wrong. — max, Aug 04 '17 at 14:56
As per the link I shared, the SCSS equivalent is same as your generated CSS — Abhi, Aug 04 '17 at 14:59
So I think it's not possible in SCSS, I have to write pure CSS. — max, Aug 04 '17 at 15:01
You may put your CSS into an SCSS file and it should work. Check [THIS](http://sass-lang.com/guide) for SCSS basics and examples — Abhi, Aug 04 '17 at 15:01
https://stackoverflow.com/questions/11084757/sass-scss-nesting-and-multiple-classes/11084798#11084798 — Christoph, Aug 04 '17 at 15:04
There is not SASS equivalent for this. And the reason is, this notation should be about nesting (maintaining structure of parent/child nodes). When you arbitrarily concatenate selectors like this, I can guarantee you that you will lose the overview of your code pretty quickly in large projects. If you need to prepend an `a` just to make your selector more specific this already hints to problems in the structure of your css. — Christoph, Aug 04 '17 at 15:08

score 3 · Accepted Answer · answered Aug 05 '17 at 08:35

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;
}

SCSS ampersand operator

1 Answers1