sass - 适用于所有边界的 SASS Mixin？

Question

我目前正在为我们的一位客户开发一个网站，该设计包括很多虚线边框。这些的 CSS 总是采用以下形式：

border-direction: 1px dotted $bdrColor;

其中方向是顶部、右侧、底部或顶部。由于这个边界在整个站点中被如此频繁地使用，我认为为此创建一个 mixin 会很酷，当我需要时可以参考我希望边界去的方向。类似于以下内容：

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

但是我的 $direction 变量的连接不正确，SASS 没有编译。这甚至可能吗，因为我注意到 Compass 的每个方向都有 SASS 混合，以及它们的边界半径混合。

感激地收到任何帮助。

Answer 1

试试这个

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

例子

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