Question

我有下一个scss代码：

host name

我希望我的所有按钮（btn，btn-small，btn-medium，btn-big）都具有红色。

P.S。我只想上一堂课

Answer 1

由于使用的是SCSS，因此可以使用@mixin和@include：

@mixin btn {
    color: red;
}

.btn {
     @include btn;
}

.btn-smaall {
    @include btn;
    font-size: 17pt;
}

并针对您要创建的其余按钮类执行此操作。

另一种方法是这样调整选择器：

.btn {
    font-size: 24pt;
    color: red;

    &.btn-small {
        font-size: 17pt;
    }

    &.btn-meddium {
        font-size: 24pt;
    }

    &.btn-big {
        font-size: 36pt;
    }
}

然后您可以通过将类btn和btn-small添加到按钮来创建一个小按钮。例如<button class="btn btn-small>Test</button>

Answer 2

您可以定义这样的类（我的偏爱）：btn btn__small

然后，您可以根据需要使用scss触发它：

.btn {
    font-size: 24pt;
    color: red;

    &__small {
        font-size: 17pt;
    }
}

SCSS对孩子使用父样式（文本）

2 个答案: