如何使用 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