css - 如何使用@include sass 做类似的事情

Question

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

文件 => 结构.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;
}

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

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