Sass - 边框的 Mixin

Question

是否有用于定义边界方向的边界的 mixin？

我在用：

@mixin border-all($width, $style, $color) {
    border-width: $width;
    border-style: $style;
    border-color: $color;
}

它正在工作，但正如名称所说，mixin 适用于所有方向。如何定义边界方向？

我在想这样的事情： @mixin border($direction, $width, $style, $color)

有任何想法吗？

Answer 1

是的，你可以这样做：

@mixin border($direction, $width, $style, $color) {
  border-#{$direction}: $width $style $color;
}

但是，我建议不要在这种特殊情况下使用 mixin，因为通过默认的 CSS 语法，您没有从中获得任何好处。

将默认边框样式保存到变量或 mixin 以便于重用可能更有用。