SASS Mixin的所有邊界？

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

border-direction: 1px dotted $bdrColor;

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

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

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

感激地收到任何幫助。

是您的mixin真的連節省什麼？ '$ my-border：1px點綴; .foo {border-left：$ my-border red; }' – cimmanon 2013-02-25 13:21:17

這並不是最有用的mixin。但是這意味着可以爲網站上的邊界定義單一樣式，然後只需要在需要使用mixin時添加方向。 – 2013-02-25 16:01:24

試試這個

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

例

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

2013-02-25 11:10:31 c4pone

工作過。謝謝 – 2013-02-26 14:22:24

回答