Question

我不确定这是否可行。但我觉得应该有办法做到这一点。我正在使用SASS，我正在努力寻找一种优化边界的方法。我希望能够在一行中定义边框边长，类型和颜色。

有些情况下，我有1,2或3个边框。而我想做的是。使用SASS写一些东西，其中所有属性都可以在一行中定义。问题是......

border-left：border-right: border-top:和border-bottom:

是否所有单独的选择器和我想要组合它们。

我想做的事情是这样的......

SUDO CODE：

border ($top,$left,$right,$bottom, $type, $color);

#div {
    @include border(1px, 1px, 1px, 0, solid, #CCC);
}

我认为沿着这些线路的某些东西会很接近......但问题是将所有边界选择器组合成一行，以便输出为有效的CSS。

@mixin borders {
  border:($top,$left,$right,$bottom, $type, $color);
}

使用@mixin是完全错误的，我很确定这一点......所以任何有助于指出我正确方向的帮助都会非常感激。提前谢谢..

Answer 1

我当时想要做类似的事情并最终得到这个@mixin。

@mixin border ($style,  $sides...){

    @if ($style != "") {

        @if ($sides == "") {

            border: $style;

        } @else {

            @each $side in $sides {

               @if ($side == 'top' or
                    $side == 'right' or
                    $side == 'bottom' or
                    $side == 'left') {

                    border-#{$side}: $style;

                }

            }

        }

    }

}

Answer 2

另一种可能性：

@mixin border( $coordinates: 0 0 0 0, $colour: #000000, $style: solid ) {
  $top: nth($coordinates, 1);
  $right: nth($coordinates, 2);
  $bottom: nth($coordinates, 3);
  $left: nth($coordinates, 4);

  @if not(unitless($top)) {
    border-top: $top $style $colour;
  }
  @if not(unitless($right)) {
    border-right: $right $style $colour;
  }
  @if not(unitless($bottom)) {
    border-bottom: $bottom $style $colour;
  }
  @if not(unitless($left)) {
    border-left: $left $style $colour;
  }

}

$side: 1px;
@include border($side 0 $side 0, black);

CSS输出：

 border-top: 1px solid black;
 border-bottom: 1px solid black;

这样你可以避免不得不覆盖样式，但如果你需要定位所有的边界边，我仍然宁愿使用普通的css速记。

如果传递单个$ coordinates值，可能会扩展它以输出速记属性。这样至少可以标准化所有边框样式调用。

Answer 3

好的，因为我的评论没有回复，所以我如何使用最佳答案中的mixin：

@mixin border($style, $color, $sides) {
    @if ($style != "") {

        @if ($sides == "") {
            border: $style $color;

        } @else {
            @each $side in $sides {
               @if ($side == 'top' or
                    $side == 'right' or
                    $side == 'bottom' or
                    $side == 'left') {

                    border-#{$side}: $style $color;
                }
            }
        }  

    }
}

用法：

.use-border {
   @include border(1px solid, #22222, bottom right);
}

您可以在最后一个参数上定义多个方向。很好，乐于助人的混合！

Answer 4

这是我的版本。它并不完美，但它很短。

@mixin border($side, $style) {
  @if $side == all {
border: $style;
  } @else {
border-#{$side}: $style;
  }
}

Answer 5

@mixin  border($color: $white, $opacity: 1,$width : 1px,$style : solid, $position: '') {

  @if $position != '' {
    $position : "-#{$position}";
  }
  border#{$position}:#{$width } #{$style} #{$color};
  border#{$position}:#{$width } #{$style} #{rgba($color,$opacity)};
}

Answer 6

你不需要混音。你可以use plain CSS as documented on MDN：

border CSS属性是一个速记属性，用于在样式表中的单个位置设置各个border属性值。 border可用于设置以下一项或多项的值：border-width，border-style，border-color。

使用简写设置边框的宽度，样式和颜色的示例：

border: 1px solid #CCC

这将仅适用于每一行。如果您希望它与其他方不同，则可以覆盖特定方：

border: 1px solid #CCC
border-top: 0

SASS优化边框成一行代码

6 个答案: