Как бы я использовал 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-классов.Кроме того, я бы также хотел, чтобы кнопка-1 отличалась от цвета по умолчанию:

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

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

К сожалению, эта реализация заканчивается тем, что они оба красного цвета.Как я могу настроить свой SCSS для легкого переопределения переменной?

Answer 1

Используйте дополнения: https://sass -lang.com / документация / 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();
}