SASS Mixin的所有邊界？

Question

我目前正在爲我們的客戶之一設計網站，並且設計中包含許多虛線邊框。這些CSS總是採取以下形式：

border-direction: 1px dotted $bdrColor; 

其中方向是頂部，右側，底部或頂部。由於這個邊框在整個網站中的使用頻率非常高，我認爲創建一個mixin會很酷，在需要時可以引用這個mixin，只需要沿着我希望邊界去的方向傳遞即可。沿線的東西：

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

但是我的my $ direction變量的連接不正確，SASS不能編譯。這是甚至可能的，因爲我已經注意到Compass在每個方向上都有SASS mixins以及它們的邊界半徑mixin。

感激地收到任何幫助。

Answer 1

試試這個

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

例

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