Border Sass Mixin

The following are two (2) Sass mixins for the CSS border properties. The first mixin is for the border shorthand property and the second mixin is for specifying individual CSS border properties.You can include both mixins in your project and use only one or both.

Border – Shorthand property

For the border shorthand property, the Sass mixin is:

// Border shorthand version
@mixin border($border) {
  border: $border;

Usage example would be:

@include border(width style color);

Example of how you would add the mixin to your Sass project is:

@include border(1px solid #000);

In the above example, the CSS output would be:

border: 1px solid #000

Border – Individual properties

To specify individual CSS border properties, you would use the following mixin:

// Border longhand version
@mixin border-all($width, $style, $color) {
  border-width: $width;
  border-style: $style;
  border-color: $color;

Usage example would be:

@include border-all(width, style, color);

An example of how you would add the Sass mixin to your Sass project would be:

@include border-all(1px, solid, #000);

In the example above, the CSS output would be:

border-width: 1px;
border-style: solid;
border-color: #000;