Question

我一直在阅读a couple of answers，但这些都无法帮助我。

我想为包含三个变量的边界编写规则。第一个是可选的，可以清楚地显示边框的哪一侧（顶部，右侧，底部或左侧;如果不存在，则默认值应为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

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

1 个答案: