嵌套引用父选择器（＆amp;）上的SCSS错误

Question

为什么我不能在SCSS中使用LESS中的代码：

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

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

我在输出中需要这个CSS：

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

编译时的预处理显示错误：

  

语法错误：＆＃34后无效的CSS; ＆amp;＆＃34;：期待＆＃34; {＆＃34;，＆＃34; _red {＆＃34;   ＆＃34; _red＆＃34;只能在复合选择器的开头使用。上   main.scss的第4行

Answer 1

您的语法是正确的，但仅适用于Sass 3.3及更高版本。刚刚在SassMeister尝试了这个，它与Sass 3.3.4一起使用。

在3.2版本中，这不受支持，请参阅this Github issue进行讨论。

Answer 2

你想要这个

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

示例：

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