如何在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%);
  }
}

我如何編寫一個小的藍色按鈕的選擇器，使其僅包含$ blue背景，而不包含漸變，而無需寫出選擇器名稱，如&.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;
        }
    }
}

同樣的結果：

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