私のSass Mixinドライヤーを作るにはどうすればいいですか？

Question

私は、すべてのボタンでいくつかのミックスインを作成して、重複を減らし、全体的なパフォーマンスの向上に役立てようとしました。私はこれを締める方法のガイダンスを探していますので、できるだけDRY（自分自身を繰り返してはいけません）のようにしています。それとも、それはできるだけ早くDRYになっていますか？あなたの考えをありがとうございます。

// mixin - button shape 
@mixin buttonShape { 
    vertical-align:middle; 
    line-height:1.333rem;height:2.166rem; 
    color:#282a2e; 
    border-radius:0; 
    margin-top:1.083rem; 
    margin-bottom:.333rem; 
    margin-right:1.073rem; 
    border:none; 
    transition: background-color .2s; 
} 

// mixin - button gradients 
@mixin gradientNormal { 
    background-color:#efefee; 
    background:linear-gradient(to bottom,#efefee 0,#d0d0ce 100%); 
    box-shadow:inset 0 0 0 .083rem #fff;outline:1px solid silver; 
} 

@mixin gradientHoverActive { 
    background:linear-gradient(to bottom,#ffffff 0,#ffffff 100%); 
    box-shadow:inset 0 0 0 .083rem #fff;outline:2px solid #e87722; 
} 


// normal state 
.ui-widget-header .ui-button, .ui-widget-content .ui-button, .ui-button { 
    font-size: 12px; 
    @include buttonShape; 
    @include gradientNormal; 
} 

// hover 
.ui-widget-header .ui-button:enabled:hover, 
.ui-widget-header .ui-button:focus, 
.ui-widget-content .ui-button:enabled:hover, 
.ui-widget-content .ui-button:focus, 
.ui-button:enabled:hover, .ui-button:focus { 
    @include buttonShape; 
    @include gradientHoverActive; 
} 

// active 
.ui-widget-header .ui-button:enabled:active, 
.ui-widget-content .ui-button:enabled:active, 
.ui-button:enabled:active { 
    @include buttonShape; 
    @include gradientHoverActive; 
} 

Answer 1

まず、それはそこに移動することに意味がので、あなたのfont-size: 12pxのみ、gradientNormalが含まセレクタによって参照されます。ここでは、コードです。

彼らはまったく同じ持っているとあなたはまた、一つにあなたのactiveとhover状態を組み合わせることができますが含まれています：あなたはまた、すべてで参照されている@include buttonShapeを考慮すると、彼らが使用するグラデーションそれに基づいてセレクタを分離することができ

// mixin - button shape 
@mixin buttonShape { 
    vertical-align:middle; 
    line-height:1.333rem; 
    height:2.166rem; 
    color:#282a2e; 
    border-radius:0; 
    margin-top:1.083rem; 
    margin-bottom:.333rem; 
    margin-right:1.073rem; 
    border:none; 
    transition: background-color .2s; 
} 

// mixin - button gradients 
@mixin gradientNormal { 
    background-color:#efefee; 
    background:linear-gradient(to bottom,#efefee 0,#d0d0ce 100%); 
    box-shadow:inset 0 0 0 .083rem #fff; 
    outline:1px solid silver; 
    font-size: 12px; 
} 

@mixin gradientHoverActive { 
    background:linear-gradient(to bottom,#ffffff 0,#ffffff 100%); 
    box-shadow:inset 0 0 0 .083rem #fff; 
    outline:2px solid #e87722; 
} 

// normal state 
.ui-widget-header .ui-button, .ui-widget-content .ui-button, .ui-button { 
    @include buttonShape; 
    @include gradientNormal; 
} 

// hover & active 
.ui-widget-header .ui-button:enabled:hover, 
.ui-widget-header .ui-button:focus, 
.ui-widget-content .ui-button:enabled:hover, 
.ui-widget-content .ui-button:focus, 
.ui-button:enabled:hover, .ui-button:focus, 
.ui-widget-header .ui-button:enabled:active, 
.ui-widget-content .ui-button:enabled:active, 
.ui-button:enabled:active { 
    @include buttonShape; 
    @include gradientHoverActive; 
} 

3つの状態がありますが、結果としてより多くの行が表示されます。

希望すると便利です。 :)

Answer 2

私はあなたにHTMLを見ることはできませんが、私はこれがさらにカスケード領域に単純化することができると思います - SCSS

https://jsfiddle.net/sheriffderek/qyz3tye3/

<button class='button'> 
    <span>Button</span> 
</button> 



<section class="other-area"> 

    <div class='button'> 
    <span>Button</span> 
    </div> 

</section> 

よりも...

/* https://www.paulirish.com/2012/box-sizing-border-box-ftw/ */ 
/* apply a natural box layout model to all elements, but allowing components to change */ 
html { 
    box-sizing: border-box; 
} 
*, *:before, *:after { 
    box-sizing: inherit; 
} 


$color: lightgreen; 
$pad: 6px; 

@mixin button() { 
    // some reset stuff for <button> and <a> 
    background: transparent; 
    border: 0; 
    font-family: inherit; 
    font-size: inherit; 
    // actual styles 
    display: inline-block; 
    background: $color; 
    padding: $pad; 
    border-radius: $pad; 
    width: 100%; 
    max-width: 160px; 
    text-align: center; 
} 

@mixin strong-button() { 
    padding: $pad*2 $pad*3; 
    background: lightblue; 
    max-width: 200px; 
} 

@mixin fun-button() { 
    background: #ff0066; 
    color: white; 
} 

.button { 
    @include button(); 
} 

.other-area { 
    // 
    .button { 
    @include fun-button(); 
    } 
} 

.another-area { 
    // 
    .button { 
    @include strong-button(); 
    } 
}