SCSS error on nesting referencing parent selector (&)

Question

Why I can't use that code from LESS in SCSS:

.button, .input, .textarea {
  // some staff

  &_red {
    background: red;
    color: #fff;
  }
}

?

I need this CSS in output:

.button_red,
.input_red,
.textarea_red {
  background: red;
  color: #fff;
}

Prepros on compiling shows that error:

Syntax error: Invalid CSS after " &": expected "{", was "_red {" "_red" may only be used at the beginning of a compound selector. on line 4 of main.scss

Answer 1

Your syntax is correct, however only for Sass 3.3 and up. Just tried this at SassMeister and it worked with Sass 3.3.4.

In the 3.2 versions this wasn't supported, see this Github issue for discussion on this.

Answer 2

You want this

https://stackoverflow.com/a/25655130/16940

Example:

            @at-root 
            {
                [barSize='large']#{&}
                {
                    font-size: 20px;
                }
            }