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); 
}