& 在 SCSS 中扩展问题

【问题标题】：& in SCSS extends issue& 在 SCSS 中扩展问题
【发布时间】：2017-08-06 15:01:31
【问题描述】：

在我的 scss 代码中，我试图制作如下占位符：

%input__label {
    color: red;
    &_content {
        color: blue;
    }
}

然后扩展它：

.input__label {
    @extend %input__label;
}

当我试图编译该代码时，只有 input__label 编译，但 input__label_content 没有：

.input__label {
   color: red;
}

（但例如使用伪元素 - &::after 一切正常）为什么会这样？我正在使用 node v7.10.1 和 node-sass v4.5.3。

【问题讨论】：

【解决方案1】：

使用混合而不是扩展：

@mixin input__label {
    color: red;

    &_content {
        color: blue;
    }
}

.input__label {
    @include input__label;
}

【讨论】：