Создание комбинации SCSS с необязательным аргументом, переданным в имя свойства

Question

Я читаю a coupleofanswers, но ни один из них не поможет мне, где он мне нужен.

Я хочу написать правило для границ, которые состоят из трех переменных. Первый вариант является необязательным и дает понять, с какой стороны должна быть граница (сверху, справа, внизу или слева, а если нет, то по умолчанию должно быть только border:). Второй определяет ширину границы, а второй - цвет. Я попробовал что-то вроде this. Но это не работает, к сожалению, потому что я не предлагаю третий аргумент, который я предполагаю.

@mixin border($direction,$size,$colour) { 
    @if variable-exists($direction) { 
     border-#{$direction}: $size solid $colour; 
    } @else { 
     border: $size solid $colour; 
    } 
} 
$borderradius: 2px; 
$borderSize: 1px; 
$mainColour: #ccc; 
$hoverColour: #4679bd; 

@include border($borderSize, $mainColour); 

Answer 1

Вы можете попробовать это решение. Добавив необязательную переменную в конце ваших аргументов. Имейте в виду, что вы должны поместить необязательную переменную последним в свой порядок аргументов.

@mixin border($size, $colour, $direction:"") { 
    @if $direction != "" { 
    border-#{$direction}: $size solid $colour; 
    } 

    @else { 
    border: $size solid $colour; 
    } 
} 

$borderradius: 2px; 
$borderSize: 1px; 
$mainColour: #ccc; 
$hoverColour: #4679bd; 

div { 
    @include border($borderSize, $mainColour); 
} 

Пример: http://sassmeister.com/gist/560cb13c92498d6d39e6