所有边境的SASS Mixin？

Question

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

border-direction: 1px dotted $bdrColor;

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

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

但是我的$ direction变量的连接是不正确的，并且SASS没有编译。这是否可能，因为我注意到指南针的每个方向都有SASS mixins及其border-radius mixins。

感激不尽的任何帮助。

Answer 1

试试这个

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

实施例

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