shorthand-border

mixins.scss

@mixin shorthand-border($border-width: 1px, $border-color: #ccc, $border-style: solid) {
	@if length($border-width) > 1 {
  		border-width: $border-width;
   		border-style: $border-style; 		
  		border-color: $border-color;
  	}
  	@else if length($border-style) > 1 {
  		border-width: $border-width;
  		border-style: $border-style;
  		border-color: $border-color;
  	}
  	@else if length($border-color) > 1 {
  		border-width: $border-width;
  		border-style: $border-style;
  		border-color: $border-color;
  	}
  	@else  {
  		  border: $border-width $border-style $border-color;
  	}
}

.example-basic-border {
@include shorthand-border(1px, #000);
}

.example-4sided-border  {
@include shorthand-border(1px 1px 0px 1px, #ccc #000, dashed);
}

.example-4color-border  {
@include shorthand-border(1px, #ccc #000 #333 #555);
}

.example-2style-border {
@include shorthand-border(1px, #000, solid dashed);
}

screen.css

.example-basic-border {
  border: 1px solid black;
}

.example-4sided-border {
  border-width: 1px 1px 0px 1px;
  border-style: dashed;
  border-color: #cccccc black;
}

.example-4color-border {
  border-width: 1px;
  border-style: solid;
  border-color: #cccccc black #333333 #555555;
}

.example-2style-border {
  border-width: 1px;
  border-style: solid dashed;
  border-color: black;
}