Директива @if в Sass полезна для проверки конкретного случая - она ​​работает так же, как и оператор if в JavaScript.

@mixin make-bold ($ bool) {
@if $ bool == true {
font-weight: bold;
}
}

@mixin text-effect ($ val) {
@if $ val == опасность {
красный цвет;
}
@else, если $ val == alert {
цвет: желтый;
}
@else, если $ val == success {
цвет: зеленый;
}
@else {
черный цвет;
}
}

Создайте mixin называемый border-stroke который принимает параметр $val . mixin должен проверить следующие условия, используя @if , @else if и @else :

свет - 1px сплошной черный
средний - 3px сплошной черный
тяжелый - 6px сплошной черный

Если $val не является light, medium, или heavy, для границы должно быть установлено значение none.