SCSS - @extendに基づくメソッド（classy css）で@mixinsを使用する

Question

私はUna KravitsのSCSSを作成する方法で撮影されました。 https://una.im/classy-css/

私が実行している問題は、@mixinを使って簡単に作成できるページの一番下にあります。しかし、ミックスインをこのように使用すると、私は重複したコードになります。

彼女のポストから取ったいくつかの例：

ミックスインを使用しないように良い、これまで繰り返しなしのCSSの

$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 
    } 
    } 
} 

結果

.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; 
} 

さて、 。しかし、彼女は@ミキシンを使うことを提案する。今私は本当にこのアイデアが好きです。@if @elseを使用できるのが好きです。@mixinと静かなプレースホルダで引数を渡すことが本当に好きです。彼女の例は、唯一のCSSのステートメントを構築します（ホバーで2つ）。たとえば、元の例の下にもう少し追加します。結果の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

は、残念ながらどれだけミックスインの仕事のthats。ファイルサイズを小さくしたい場合は、変更するプロパティに対してのみ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; 
}