如何使用 SASS mixin 组合 CSS 类？

问题描述

@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

解决方法

解决办法是

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

或

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

结果 css 将是

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