Условный в SASS mixin throws error

Question

Я пытаюсь создать mixin с использованием условных выражений, но во время компиляции я получаю сообщение об ошибке. Ошибка генерируется является:

Error: Properties are only allowed within rules, directives, mixin includes, or other properties. 

Вот код, который я использую:

@mixin mypadder ($topBottomBoth: myDefaultOption, $topUnits: 0, $bottomUnits: 0) { 
    @if $topBottomBoth == tp { 
     padding-top: 1em; 
     } 
    @else if $topBottomBoth == bt { 
     padding-bottom: 1em; 
     } 
    @else { 
     padding-top: 1em; 
     padding-bottom: 1em; 
     } 
    } 

Я также попытался поставить значение параметра $ topBottomBoth в кавычках, во-первых, именно там, где она появляется в параметрах (первая строка mixin), а затем добавление котировок вокруг значений этого параметра/параметра в условных тестах. В каждом случае я получаю ту же ошибку. Посмотрев на многочисленные примеры условных миксинов, я все еще не вижу, где мой синтаксис неверен.

Answer 1

Нет ничего плохого в микшинге, вы просто назовете это неправильным. Сасс знает, что свойства CSS не допускаются вне селекторов.

Неправильно:

@include mypadder; 

Правильно:

.foo { 
    @include mypadder; 
}