Variables 使用传递给属性名的可选参数进行SCSS混合

我一直在通读，但这些都不能帮助我找到需要的地方

我想为包含三个变量的边界编写一个规则。第一个选项是可选的，它明确了边框应该位于哪一侧（顶部、右侧、底部或左侧；如果不存在，则默认值应该是

边框：

）。第二个定义了边框的宽度，后者定义了颜色。我试过类似的东西。但不幸的是，这不起作用，因为我没有提供我猜的第三个论点

@mixin border($direction,$size,$colour) {
    @if variable-exists($direction) {
        border-#{$direction}: $size solid $colour;
    } @else {
        border: $size solid $colour;
    }
}
$borderradius: 2px;
$borderSize: 1px;
$mainColour: #ccc;
$hoverColour: #4679bd;

@include border($borderSize, $mainColour);

---

你可以试试这个解决方案。通过在参数末尾添加可选变量。请记住，您必须将可选变量放在参数顺序的最后一位

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

  @else {
    border: $size solid $colour;
  }
}

$borderradius: 2px;
$borderSize: 1px;
$mainColour: #ccc;
$hoverColour: #4679bd;

div {
  @include border($borderSize, $mainColour);
}

---

例如：

为什么要这样做？使用这个mixin比直接使用CSS更冗长。谢谢！你能解释一下吗？

：“

在mixin中做什么？@BramVanroy

：”

表示它是一个空的可选变量（变量不存在）。所以如果$direction！=（不是）空使用$direction变量，否则忽略它。希望这有帮助：）