border

Shorthand for using a single border value on multiple sides of an element.

use-name

scut-border

type

mixin only

arguments

$style
A vanilla-CSS border shorthand value for the border you wish to create.
$sides

default

n y

The sides on which to add your border: a list of 2 or 4. n abbreviates null, passing no value; y (or anything other than n), will create a rule. See below for details.

The $sides argument determines which sides get the border. It parallels the established pattern in vanilla CSS: if a list of two is passed, the first value applies to top and bottom, the second to right and left; if a list of four is passed, the values apply, in order, to top, right, bottom, and left.

As elsewhere in Scut, n stands for null and results in no rule being created. For scut-border, y (or anything other than n) stands for "yes" or true and will result in a rule. See the examples below.

(If you don't see the purpose or value of such a silly little shorthand, please read the explanation in scut-margin, which applies equally to this mixin.)

example

SCSS

.eg-border-1 {
  @include scut-border(5px solid, y n);
}
.eg-border-2 {
  @include scut-border(0.5em solid $eg-light, n y);
}
.eg-border-3 {
  @include scut-border(10px solid $eg-dark, y y n n);
}
.eg-border-4 {
  @include scut-border(0.75em solid $eg-dark, n n y y);
  @include scut-border(0.75em solid $eg-light, y y n n);
}

compiled CSS

.eg-border-1 {
  border-top: 5px solid;
  border-bottom: 5px solid;
}

.eg-border-2 {
  border-left: 0.5em solid #9AE9FF;
  border-right: 0.5em solid #9AE9FF;
}

.eg-border-3 {
  border-top: 10px solid #002834;
  border-right: 10px solid #002834;
}

.eg-border-4 {
  border-bottom: 0.75em solid #002834;
  border-left: 0.75em solid #002834;
  border-top: 0.75em solid #9AE9FF;
  border-right: 0.75em solid #9AE9FF;
}

Result

Variation 1

Variation 2

Variation 3

Variation 4