嵌套引用父选择器 (&) 时出现 SCSS 错误答案

【问题标题】：SCSS error on nesting referencing parent selector (&)嵌套引用父选择器 (&) 时出现 SCSS 错误
【发布时间】：2014-05-26 11:51:52
【问题描述】：

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

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

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

我在输出中需要这个 CSS：

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

Prepros 编译显示错误：

语法错误：“&”后的 CSS 无效：预期为“{”，为“_red {” "_red" 只能用在复合选择器的开头。在 main.scss 的第 4 行

【问题讨论】：

你使用的是什么版本的 Sass？

标签： compiler-errors sass

【解决方案1】：

您的语法是正确的，但仅适用于 Sass 3.3 及更高版本。刚刚在SassMeister 尝试过，它适用于 Sass 3.3.4。

在 3.2 版本中不支持此功能，请参阅 this Github issue 了解有关此问题的讨论。

【讨论】：

【解决方案2】：

你想要这个

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

例子：

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

【讨论】：