4

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

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

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

都是单独的选择器，我想将它们组合起来。

我正在考虑做的是这样的事情......

须藤代码：

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 是完全错误的，我很确定这一点......所以任何帮助我指向正确方向的帮助将不胜感激。提前致谢..

4

6 回答 6

9

我想做类似的事情，最后得到了这个@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;

                }

            }

        }

    }

}
于 2012-11-08T14:35:56.340 回答
4

另一种可能：

@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 值，则可能会将其扩展为输出速记属性。这样至少你可以标准化你所有的边框样式调用。

于 2013-02-21T23:18:09.450 回答
2

好的，因为没有回复我的评论，这是我如何使用最佳答案中的 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);
}

您可以在最后一个参数上定义多个方向。好用又好用的mixin！

于 2016-01-22T12:30:50.077 回答
1

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

@mixin border($side, $style) {
  @if $side == all {
border: $style;
  } @else {
border-#{$side}: $style;
  }
}
于 2015-10-21T14:17:34.027 回答
0 
@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)};
}
于 2017-08-10T15:06:34.143 回答
-3

你不需要mixin。您可以使用 MDN 上记录的纯 CSS：

边框 CSS 属性是一种简写属性，用于在样式表中的单个位置设置各个边框属性值。边框可用于设置以下一项或多项的值：边框宽度、边框样式、边框颜色。

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

border: 1px solid #CCC

这将仅在一行中适用于每一侧。如果您希望它有所不同，则可以覆盖特定的一侧：

border: 1px solid #CCC
border-top: 0
于 2012-08-02T18:40:15.050 回答