如何使用SASS mixin组合CSS类

Question

@mixin box-default {
$box: &;
border: solid 1px;
padding: 16px;

&--sm {
padding: 8px;
}

&--dark {
background-color: darkgrey;
}

&--sm &--dark {
padding: 4px;
} 
}
.test-box {
@include box-default;
}

<div class="test-box--sm test-box--sm">TEST</div>

有可能以某种方式制作下面的CSS样式吗？

.test-box--sm.text-box--dark

Answer 1

解决方案是

&--sm#{#{$box}--dark} {
padding: 4px;
} 

或

&--sm#{&}--dark {
padding: 4px;
}

结果css将是

.test-box--sm.text-box--dark