css - 如何使用 @include sass 做一些事情

Question

我不想使用 mixins 来定义我的属性。我想要在@extend/@include 之间构建一些东西，就像下面的例子

文件 => structure.scss

.box{
    width:100px;
    height:100px;
}

文件 => color.scss

@import 'structure.scss';
.box{
    @extend .box;
    background: red;
}

输出:

.box{
    width:100px;
    height:100px;
}
.box{
    background: red;
}

我不想要 mixins:

.box{
    width:100px;
    height:100px;
    background: red;
}

Answer 1

没有进口..

.bg-red {
    background: red;
}
.box {
    width:100px;
    height:100px;
    .bg-red;
}

或

.box {
    width:100px;
    height:100px;
}
.red-box {
    background: red;
    .box;
}

或

.square {
    width:100px;
    height:100px;
}
.bg-red {
    background: red;
}

.red-box {
    .square;
    .bg-red;
}

它仍然是一个mixin。顺便说一句，这是 LESS 语法，sass/scss 语法应该类似

或者只使用 OOCSS <div class="rounded red box"></div>