为自定义边框编写SCSS mixin

Question

我想知道我是否可以将mixin用于自定义边框。我网站上的所有边界都是可靠的，所以我可以将它放在适当的位置，但所有其他值都可以变化。这意味着，这个地方（这里称为“方向”），即左，右，上或下，边框的像素大小及其颜色。我尝试了以下操作，但Prepros会抛出错误Invalid CSS after " border-": expected "{", was "$direction: $si..."。

@mixin border($direction,$size,$colour) {
  border-$direction: $size solid $colour;
}

Answer 1

您只需使用variable interpolation即可。示例：

@mixin border($direction,$size,$colour) {
  border-#{$direction}: $size solid $colour;
}

SassMeister示例：http://sassmeister.com/gist/b5119d77bae5582a0cc5

关键是在边框方向添加#{和}以扩展它。