& 在 SCSS 中扩展问题

Question

在我的 scss 代码中，我试图让占位符像：

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

然后扩展它：

.input__label {
    @extend %input__label;
}

当我尝试编译该代码时，仅 input__label 编译，但 input__label_content 不编译：

.input__label {
   color: red;
}

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

Answer 1

使用混合而不是扩展：

@mixin input__label {
    color: red;

    &_content {
        color: blue;
    }
}

.input__label {
    @include input__label;
}

& in SCSS extends issue