SCSS文件中使用mixin不生效，请问正确使用方式是什么？

你当前的写法不是SCSS mixin的正确使用方式，不生效的核心原因是mixin内部嵌套了选择器，导致最终编译生成的CSS选择器层级不符合预期。

问题原因分析 #

你当前的写法经过SCSS编译后，生成的CSS代码如下：

.excelGridCell .excelGridCell {
    background: $nav-background;
    height: 2.5em;
    border-radius: .8rem;
}

这个编译结果的语义是匹配所有作为.excelGridCell后代的.excelGridCell元素，只有嵌套的对应类名元素才会命中样式，你原本要给顶层.excelGridCell加样式的需求自然无法生效。

正确写法 #

你要复用样式的场景下，mixin内部只需要写样式属性，不需要额外包裹选择器：

// 正确的mixin定义
@mixin special-button {
    background: $nav-background;
    height: 2.5em;
    border-radius: .8rem;
}

之后用你原来的方式调用即可：

.excelGridCell{
    @include special-button;
}

编译后会生成你需要的目标样式：

.excelGridCell {
    background: $nav-background;
    height: 2.5em;
    border-radius: .8rem;
}

内容的提问来源于stack exchange，提问作者Baba