使用传递给属性名称的可选参数制作 SCSS mixin

Question

我一直在阅读a coupleofanswers，但这些都不能帮助我在需要的地方。

我想为包含三个变量的边框编写规则。第一个是可选的，并明确边框应该在哪一侧（顶部、右侧、底部或左侧；如果不存在，则默认应为border:）。第二个定义边框的宽度，后者定义颜色。我尝试了类似this 的东西。但不幸的是，这不起作用，因为我没有提供我猜测的第三个论点。

@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);

Answer 1

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

@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);
}

一个例子：http://sassmeister.com/gist/560cb13c92498d6d39e6