追加のクラスでsass拡張プレースホルダを使用する

Question

デフォルトのボタンには、このサスプレースホルダを使用しました。成功ボタンまたは危険ボタンのような追加のボタンが必要です。

これは要するに私SASSのプレースホルダです：

%button { 
    border: none; 
    background-color: $default-color; 
    cursor: pointer; 
    color: $default-color-text; 
} 

%button-danger { 
    @extend %button; 
    background-color: $default-color-danger; 
    color: $default-color-danger-text; 
} 

%button-success { 
    @extend %button; 
    background-color: $default-color-success; 
    color: $default-color-success-text; 
} 

は今、私はこれらのボタンから延び、ボタンのクラスに危険/成功ボタンへの追加クラスを持つ要素を作りたいです。

.button { 
    @extend %button; 

    &.danger { 
    @extend %button-danger; 
    } 

    &.success { 
    @extend %button-success; 
    } 
} 

結果が正しい

.button.danger, .button.success, .button { 
    border: none; 
    background-color: #a0a0a0; 
    cursor: pointer; 
    color: #ffffff; } 

.button.danger { 
    background-color: #d9534f; 
    color: #fff; } 

.button.success { 
    background-color: #5cb85c; 
    color: #fff; } 

ザッツですが、私は別のボタンの多くを考えると、そのような短い方法があるかもしれません：

.button { /* only one class in this directive */ 
    border: none; 
    background-color: #a0a0a0; 
    cursor: pointer; 
    color: #ffffff; } 

.button.danger { 
    background-color: #d9534f; 
    color: #fff; } 

.button.success { 
    background-color: #5cb85c; 
    color: #fff; } 

方法はありますこの結果をコンパイルするか、それは推奨できませんか？

Answer 1

％button-dangerと％button-successから拡張を削除できます。

%button { 
    border: none; 
    background-color: white; 
    cursor: pointer; 
    color: white; 
} 

%button-danger { 
    background-color: red; 
    color: red; 
} 

%button-success { 
    background-color: green; 
    color: green; 
} 


.button { 
    @extend %button; 

    &.danger { 
    @extend %button-danger; 
    } 

    &.success { 
    @extend %button-success; 
    } 
}