如何做@include sass之类的事情

Question

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

file =＆gt; structure.scss

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

file =＆gt; 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>