Dynamic border

by tonytlwu

HTML

<div class="myDiv">

</div>

<div class="myOtherDiv">

</div>

SCSS

body {
  padding: 40px;
}

$borderType: 'all' !default; // <-- CHANGE THIS - 'all', 'top', 'right', 'bottom', 'left', 'none'
$borderWidth: 2px !default;
$borderStyle: solid !default;
$borderColor: black !default;

$borderType2: 'all' !default; // <-- CHANGE THIS - 'all', 'top', 'right', 'bottom', 'left', 'none'
$borderWidth2: 5px !default;
$borderStyle2: dotted !default;
$borderColor2: papayaWhip !default;

@mixin setBorder($value, $width, $style, $color){
  @if $value == 'all' {
    border: $width $style $color;
  }
  @if $value == 'top' {
    border-top: $width $style $color;
  }
  @if $value == 'right' {
    border-right: $width $style $color;
  }
  @if $value == 'bottom' {
    border-bottom: $width $style $color;
  }
  @if $value == 'left' {
    border-left: $width $style $color;
  }
  @if $value == 'none' {
    border: none;
  }
}

.myDiv {
  width: 100px;
  height: 100px;
  @include setBorder($borderType, $borderWidth, $borderStyle, $borderColor);
}

.myOtherDiv {
  width: 100px;
  height: 100px;
  @include setBorder($borderType2, $borderWidth2, $borderStyle2, $borderColor2);
}