Dynamic border

by Hugo Carneiro

HTML

<div class="myDiv">

</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;

@mixin setBorder($value){
  @if $value == 'all' {
    border: $borderWidth $borderStyle $borderColor;
  }
  @if $value == 'top' {
    border-top: $borderWidth $borderStyle $borderColor;
  }
  @if $value == 'right' {
    border-right: $borderWidth $borderStyle $borderColor;
  }
  @if $value == 'bottom' {
    border-bottom: $borderWidth $borderStyle $borderColor;
  }
  @if $value == 'left' {
    border-left: $borderWidth $borderStyle $borderColor;
  }
  @if $value == 'none' {
    border: none;
  }
}

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