css - 我如何在 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;
}