SASS优化边框成一行代码

Question

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

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

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

是所有单独的选择器,我想结合它们.

我想做的就是这样......

SUDO代码:

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;

                }

            }

        }

    }

}