Question

I am not sure if this is possible or not. But I feel like there should be a way to do this. I am using SASS and I am trying to find a way to optimize borders. I would like to be able to define my border sides sizes, type, and color all in one line.

There are instances where I have 1,2, or 3 borders. And what I would like to do is. Write something using SASS where all properties can be defined in one line. The problem is..

border-left: border-right: border-top: and border-bottom:

Are all separate selectors and I would like to combine them.

What I am thinking of doing is something like this…

SUDO CODE:

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

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

I was thinking something along these lines would be close… but again the problem is combining all border selectors into one line so that is outputs as valid CSS.

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

Using a @mixin is all wrong, I am pretty sure of this… So any help to point me in the right direction would be much appreciated. Thanks in advance..

Answer 1

I was looking to do something similar and ended up with this @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;

                }

            }

        }

    }

}