SCSS - Использование @mixins в методе, основанном на @extend (classy css)

Question

Я был взят с Уной Кравиц методом создания ее SCSS. https://una.im/classy-css/

Проблема, с которой я сталкиваюсь, находится внизу той страницы, где она использует @mixin, чтобы облегчить сборку. Но мне кажется, что если я буду использовать миксин, как показано выше, я получу дублированный код.

Некоторые примеры взяты из ее поста:

Без использования mixin

$color--primary: #b29;
$color--secondary: #19d;

%btn--base {
  border: 1px solid currentColor;
  border-radius: 1.5em;
  background: none;
  outline: none;
  transition-duration: .25s;
  cursor: pointer;
  margin: 30px;
  padding: .5em 1em;

  &:hover {
    color: white;
    background: black;
  }
}

%btn--primary {
  @extend %btn--base;
  color: $color--primary;
  font-size: 1.5em;
}

%btn--secondary {
  @extend %btn--base;
  color: $color--secondary;
  font-size: 1.1em;
}

.hero {
  &__btn {
    @extend %btn--primary;
  }
}

.sidebar {
  &__btn {
    @extend %btn--secondary;
  }
}

.global-nav {
    &__btn {
      @extend %btn--secondary;
      &--login {
        @extend .global-nav__btn;
        margin-right: 1em;
        // at this point, you're
        // styling .global-nav__btn--login
    }
  }
}

Результаты в CSS без повторов

.hero__btn, .sidebar__btn, .global-nav__btn, .global-nav__btn--login {
  border: 1px solid currentColor;
  border-radius: 1.5em;
  background: none;
  outline: none;
  transition-duration: .25s;
  cursor: pointer;
  margin: 30px;
  padding: .5em 1em;
}
.hero__btn:hover, .sidebar__btn:hover, .global-nav__btn:hover, .global-nav__btn--login:hover {
  color: white;
  background: black;
}

.hero__btn {
  color: #b29;
  font-size: 1.5em;
}

.sidebar__btn, .global-nav__btn, .global-nav__btn--login {
  color: #19d;
  font-size: 1.1em;
}

.global-nav__btn--login {
  margin-right: 1em;
}

Хорошо, пока все хорошо. Но затем она предлагает использовать @mixin. Теперь мне очень нравится эта идея, мне нравится возможность использовать @if @else, и мне действительно нравится передавать аргументы с помощью @mixin и заполнителя без вывода сообщений. Ее пример строится только однажды css-оператором (хорошо два с парением). Например, я добавлю еще несколько ниже исходного примера. Обратите внимание, как полученный CSS повторяется. Я что-то здесь упускаю? Я мог бы пойти с чем-то вроде приведенного выше примера, но опять же, мне действительно нравятся варианты использования @mixin в сочетании с его параметрами.

пример

// the colon after the argument denotes a default value
// creating the constructor function (mixin)

@mixin btn-me($color: hotpink, $size: normal) {
  border: 1px solid $color;
  border-radius: 1.5em;
  background: none;
  outline: none;
  transition-duration: .25s;
  cursor: pointer;
  margin: 30px;
  padding: .5em 1em;

  @if $size == 'small' {
    font-size: .8em;
  } @else {
    font-size: 1.2em;
  }

  &:hover {
    color: white;
    background: $color;
  }
}

// creating placeholder classes to extend from and reference

%btn--primary {
  @include btn-me; // no arguments means it takes defaults
}

%btn--secondary {
  @include btn-me(blue, small);
}

%additional--btn--to--show--repeats {
  @include btn-me(green, small);
}

// instantiating the code with semantic naming
// this is the only moment that we are writing
// any code to be compiled
.hero__btn {
  @extend %btn--secondary;
}
.additional__btn {
  @extend %btn--secondary;
}
.additional__btn__two {
  @extend %btn--primary;
}
.additional__btn__three {
  @extend %additional--btn--to--show--repeats;
}

Результирующий повторяющийся CSS

.additional__btn__two {
  border: 1px solid hotpink;
  border-radius: 1.5em;
  background: none;
  outline: none;
  transition-duration: .25s;
  cursor: pointer;
  margin: 30px;
  padding: .5em 1em;
  font-size: 1.2em;
}
.additional__btn__two:hover {
  color: white;
  background: hotpink;
}

.hero__btn, .additional__btn {
  border: 1px solid blue;
  border-radius: 1.5em;
  background: none;
  outline: none;
  transition-duration: .25s;
  cursor: pointer;
  margin: 30px;
  padding: .5em 1em;
  font-size: .8em;
}
.hero__btn:hover, .additional__btn:hover {
  color: white;
  background: blue;
}

.additional__btn__three {
  border: 1px solid green;
  border-radius: 1.5em;
  background: none;
  outline: none;
  transition-duration: .25s;
  cursor: pointer;
  margin: 30px;
  padding: .5em 1em;
  font-size: .8em;
}
.additional__btn__three:hover {
  color: white;
  background: green;
}

Answer 1

К сожалению, именно так работают миксины. Если вы хотите уменьшить размер файла, я бы подумал об использовании mixin только для свойств, которые вы бы изменили, и о регулярном расширении для неизменных правил CSS.

@mixin btn-me($color: hotpink, $size: normal) {
  border: 1px solid $color;

  @if $size == 'small' {
    font-size: .8em;
  } @else {
    font-size: 1.2em;
  }

  &:hover {
        background: $color;
  }
}

%btn {
  border-radius: 1.5em;
  background: none;
  outline: none;
  transition-duration: .25s;
  cursor: pointer;
  margin: 30px;
  padding: .5em 1em;

  &:hover {
    color: white;
  }
}

%btn--primary {
  @include btn-me; // no arguments means it takes defaults
  @extend %btn;
}

%btn--secondary {
  @include btn-me(blue, small);
  @extend %btn;
}