SCSS - @extend 기반 방법 (classy css)에서 @mixins 사용

Question

나는 Una Kravits와 함께 SCSS를 작성했습니다. https://una.im/classy-css/

내가 겪고있는 문제는 그 페이지의 맨 아래에 @mixin을 사용하여 건물을 더 쉽게 만들 수 있다는 것입니다. 그러나 믹스 인을 표시된 방식으로 사용하면 중복 코드가 생성됩니다. , 반복

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

좋아없이 믹스 인 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 
    } 
    } 
} 

결과 사용하지 않고

지금까지 너무 좋은 : 그녀의 게시물에서 촬영

몇 가지 예 . 그러나 그녀는 @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 일 이잖아. 파일 크기를 줄이려면 변경하려는 속성에만 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; 
}