SASS Mixin для всех границ?

Question

В настоящее время я работаю над сайтом для одного из наших клиентов, и дизайн включает в себя множество точечных границ. CSS для них всегда имеет форму:

border-direction: 1px dotted $bdrColor; 

где направление сверху, справа, внизу или сверху. Поскольку эта граница используется так часто на протяжении всего сайта, я подумал, что было бы здорово создать mixin для этого, на который можно ссылаться, когда требуется, чтобы я просто проходил в направлении, в котором я хочу, чтобы граница шла. Что-то вдоль линий:

@mixin dotted-border($direction){ 
border-$direction: 1px dotted $articleSubContentBdrColor; 
} 

Однако моя конкатенация моего переменных $ направления неверна и оленьей кожи компиляции SASS. Возможно ли это, так как я заметил, что у компаса есть смесители SASS для каждого направления с их смесями радиуса радиуса.

Любая помощь с благодарностью получена.

Answer 1

попробовать этот

@mixin dotted-border($direction,$articleSubContentBdrColor){ 
    border-#{$direction}: 1px dotted $articleSubContentBdrColor; 
} 

Пример

body{ 
    @include dotted-border(right, black); 
}