How can i combine two nested selectors in SASS?

Question

I'm writing styles for my button the following way:

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

How can i write a selector for the small blue button to only include the $blue background, not the gradient, without writing out the selector names like &.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;
        }
    }
}

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