SCSS混音不起作用

Question

我正在尝试使用SCSS学习mixin，我正在尝试制作一个简单的mixin来控制按钮的样式，但它不起作用。

我确信我已经错过了一些明显的东西，但我现在正在把头发拉出来。

非常感谢任何建议。

正如您所见here - 我的mixin未被应用。

HTML

<div class="button-collection">
<button type="button" 
      class="button-collection__button button-collection__button--is-blue">
    Button One
</button>
<button type="button" 
      class="button-collection__button button-collection__button--is-pink">
    Button Two
</button>

@mixin button($primary) {
    background-color: $primary;
}

.button-collection__button {
    display: block;
    width: 400px;
    height: 40px;
    margin: 10px auto;
    &.--is-blue {
        @include button(#449dc7);
        height: 400px;
    }
}

Answer 1

你在班级名称中犯了一个错误，它应该是&--is-blue而不是&.--is-blue，没有点。它不是mixin bug，而是错误的scss语法。