SCSS - Utilisation de @mixins dans une méthode basée sur @extend (classy css)

Question

J'ai été utilisée avec la méthode Una Kravits pour créer sa SCSS. https://una.im/classy-css/

Le problème que je rencontre est au bas de cette page, où elle utilise un @mixin pour faciliter la construction. Mais il me semble que si j'utilise un mixin de la manière montrée, je finirai avec du code dupliqué.

Quelques exemples tirés de son poste:

Sans l'utilisation d'un 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 
    } 
    } 
} 

Résultats en css sans répétitions

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

Ok, so far so good . Mais elle suggère d'utiliser un @mixin. Maintenant j'aime vraiment cette idée, j'aime pouvoir utiliser le @if @else, et j'aime vraiment pouvoir passer des arguments avec le @mixin et l'espace réservé silencieux. Son exemple ne construit qu'une fois la déclaration de css (enfin deux avec le hover). Par exemple, j'en ajouterai quelques-uns sous l'exemple original. Remarquez comment le CSS résultant a été répété. Est-ce que j'ai râté quelque chose? Je pourrais aller avec quelque chose comme l'exemple ci-dessus, mais encore une fois, j'aime vraiment les options d'utiliser le @mixin en conjonction pour ses options.

Exemple

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

résultant répéter 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

des thats Malheureusement à quel point le travail de mixins. Si vous vouliez réduire la taille de votre fichier, j'utiliserais le mixin uniquement pour les propriétés que vous modifieriez et j'utiliserais une extension régulière pour les règles css inchangées.

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