How to make combination of CSS classes using SASS mixin?

Admin 1
Viewed 35

@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>

Is it possible somehow to make CSS styles below?

.test-box--sm.text-box--dark
sass css html javascript
1 Answers

the solution is

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

or

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

the result css will be

.test-box--sm.text-box--dark
Admin1
Related