css - SCSS 混合不起作用

Question

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

我确信我错过了一些明显的东西，但我现在正在拔头发。

任何建议将不胜感激。

正如你在这里看到的- 我的 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-bluenot &.--is-blue，没有点。它不是混合错误，而是错误的 scss 语法。