Установка scss mixin обратно в true

Question

Я изучаю SASS/SCSS и играю с миксинами, пытаясь окунуться в разные доступные варианты.

Ниже приведено то, что я использую для создания box-shadows. Я использую оператор if и else для отображения эфира с или без свойства вставки.

@mixin box-shadow($inset: false, $horizontal: 0px, $vertical: 1px, $blur: 2px, $color: 000) { 
    @if $inset { 
     box-shadow: $inset $horizontal $vertical $blur $color; 
    } 
    @else { 
     box-shadow: $horizontal $vertical $blur $color; 
    } 
} 

мне интересно, как установить $inset: false в true для этого, чтобы работать должным образом.

Или есть более эффективный способ добиться того, что я пытаюсь сделать?

Answer 1

Я думаю, что вместо включения переменной $inset просто укажите ключевое слово inset. Таким образом, вы можете передать истинным или ложным, и он будет разбирать правильно:

@mixin box-shadow($inset: false, $horizontal: 0px, $vertical: 1px, $blur: 2px, $color: 000) { 
    @if $inset { 
     box-shadow: inset $horizontal $vertical $blur $color; 
    } 
    @else { 
     box-shadow: $horizontal $vertical $blur $color; 
    } 
} 

.no-inset { 
    @include box-shadow($inset: false); 
    } 

    .inset { 
    @include box-shadow($inset: true); 
    } 

Выход:

.no-inset { 
    box-shadow: 0px 1px 2px 0; 
} 

.inset { 
    box-shadow: inset 0px 1px 2px 0; 
}