我如何在SASS中結合兩個嵌套選擇器？

Question

我在寫作風格對我的按鈕方式如下：

.btn { 
    background: linear-gradient(to right bottom, $red 50%, $red-dark 50%); 

    &-small { 
    background: $red; 
    } 

    &-blue { 
    background: linear-gradient(to right bottom, $blue 50%, $blue-dark 50%); 
    } 
} 

我怎麼能寫的藍色小按鈕，選擇僅包括$藍色的背景，沒有漸變，沒有寫出選擇的名字像&.btn-small.btn-blue？

Answer 1

1）

@mixin background-gradient($color1, $color2) { 
    background: linear-gradient(to right bottom, $color1 50%, $color2 50%); 
    &-small { 
     background: $color1; 
    } 
} 
.btn-red { @include background-gradient($red, $red-dark) } 
.btn-blue { @include background-gradient($blue, $blue-dark) } 

2）

.btn { 
    &-red { 
     background: linear-gradient(to right bottom, $red 50%, $red-dark 50%); 
     &-small { 
      background: $red; 
     } 
    } 
    &-blue { 
     background: linear-gradient(to right bottom, $blue 50%, $blue-dark 50%); 
     &-small { 
      background: $blue; 
     } 
    } 
} 

相同resoult：

.btn-red { 
    background: linear-gradient(to right bottom, red 50%, red 50%); 
} 
.btn-red-small { 
    background: red; 
} 

.btn-blue { 
    background: linear-gradient(to right bottom, blue 50%, blue 50%); 
} 
.btn-blue-small { 
    background: blue; 
}