css - 我如何使用 Sass 给某些东西一个默认但可选的可覆盖值？

Question

我想使用 Sass 创建一个具有默认值的可重用 HTML 代码段，然后可以选择自定义这些值。假设我正在制作一个按钮，并设置了一些基本 SCSS 以使按钮默认为红色，如下所示:

%button-shared {
    $button-color: red;
    td {
        border-color: $button-color;
        color: $button-color;
        background-color: white;

        text-decoration: none;

        width: 50px;
        height: 15px;
        border-radius: 6px;
    }
}

我使用变量是因为我希望将它设置在两个不同的位置。在此示例中，我想要一个带有彩色轮廓的白色按钮，与彩色文本相匹配，如下所示:

现在假设我在 HTML 中提供了两个按钮不同的类，按钮一和按钮二。现在我想将该 SCSS 分配给我的两个按钮，因此我将 %button-shared 扩展到这两个 HTML 类。除此之外，我还希望按钮一的颜色与默认的红色不同:

.button-one {
    $button-color: green;
    @extend %cta-shared;
}

.button-two {
    @extend %cta-shared;
}

不幸的是，这个实现最终导致它们都变成红色。如何设置我的 SCSS 以允许轻松覆盖变量？

Answer 1

使用混合:https://sass-lang.com/documentation/at-rules/mixin

@mixin button-shared($button-color: red) {
   td {
        background-color: white;
        border-color: $button-color;
        color: $button-color;

        text-decoration: none;

        width: 50px;
        height: 15px;
        border-radius: 6px;
    }
}

.button-one {
    @include button-shared(green);
}

.button-two {
    @include button-shared();
}