SCSS Mixin 不工作

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

你写错了class名字，应该是&--is-blue而不是&.--is-blue，没有点。这不是 mixin 错误，而是错误的 scss 语法。

SCSS Mixin 不工作

SCSS Mixing not working

css

sass

scss-mixins