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这样的选择器名称的情况下，为小蓝色按钮编写一个选择器，只包含$ 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;
}

如何在SASS中组合两个嵌套选择器？

1 个答案: