How to write classes in sass for border (top, right, bottom, left)?

Question

css

How to properly think and write in sass?
So that in css something like this would turn out:

.b {
  border-top-color: rgb(0, 0, 0);
  border-top-style: solid;
  border-top-width: 1px;
  border-right-color: rgb(0, 0, 0);
  border-right-style: solid;
  border-right-width: 1px;
  border-bottom-color: rgb(0, 0, 0);
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-left-color: rgb(0, 0, 0);
  border-left-style: solid;
  border-left-width: 1px;
  border-image-source: none;
  border-image-slice: none;
  border-image-width: none;
  border-image-outset: none;
  border-image-repeat: none;
}

.bt-1 {
  border-top-color: rgb(0, 0, 0);
  border-top-style: solid;
  border-top-width: 1px;
  border-right-color: rgb(0, 0, 0);
  border-right-style: solid;
  border-right-width: 0px;
  border-bottom-color: rgb(0, 0, 0);
  border-bottom-style: solid;
  border-bottom-width: 0px;
  border-left-color: rgb(0, 0, 0);
  border-left-style: solid;
  border-left-width: 0px;
  border-image-source: none;
  border-image-slice: none;
  border-image-width: none;
  border-image-outset: none;
  border-image-repeat: none;
}

.bb-1 {
  border-top-color: rgb(0, 0, 0);
  border-top-style: solid;
  border-top-width: 0px;
  border-right-color: rgb(0, 0, 0);
  border-right-style: solid;
  border-right-width: 0px;
  border-bottom-color: rgb(0, 0, 0);
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-left-color: rgb(0, 0, 0);
  border-left-style: solid;
  border-left-width: 0px;
  border-image-source: none;
  border-image-slice: none;
  border-image-width: none;
  border-image-outset: none;
  border-image-repeat: none;
}

and so on up to 5 px
How to write a mixin, variables?
For color I will use AC. $primary etc.
How to build a diagram in your head?
Thanks for any help!

Answer 1

$sides: top,right,bottom,left;

@mixin borderClass($size,$side:all){
  $suffix: '';
  @if $side != all{
    $suffix: str-slice($side,0,1);
  }
  .b#{$suffix}-#{$size}{
    @each $i-side in $sides{
      @if $side == all or $i-side == $side{
        @include borderSide($i-side,$size);
      } @else{
        @include borderSide($i-side,0);
      }
    }
    border-image-source: none;
    border-image-slice: none;
    border-image-width: none;
    border-image-outset: none;
    border-image-repeat: none;
  }
}

@mixin borderSide($side,$size:0,$color:#000,$style:solid){
  border-#{$side}-color: $color;
  border-#{$side}-style: $style;
  border-#{$side}-width: $size*1px;
}

@for $i from 1 through 5{
  @each $side in $sides{
    @include borderClass($i,$side);
  }
  @include borderClass($i);
}

It just makes .b-1 instead of just .b . Get the conditions. You can go on and create classes for different styles, frame colors. Space for useless creativity.

Answer 2

impurities

@mixin borderStyle( $type ) {
  border-top-style: $type;
  border-right-style: $type;
  border-left-style: $type;
  border-bottom-style: $type;
}
@mixin borderColor( $color1, $color2, $color3, $color4  ) {
  border-top-color: $color1;
  border-right-color: $color2;
  border-bottom-color: $color3;
  border-left-color: $color4;
}
@mixin borderWidth( $top, $right, $bottom, $left ) {
  border-top-width: $top;
  border-right-width: $right;
  border-bottom-width: $bottom;
  border-left-width: $left;
}


.b {
  @include borderStyle( solid);
  @include borderColor( red, pink, black, green);
  @include borderWidth(5px, 10px, 20px, 3px);
}

.b2 {
  @include borderStyle( dashed );
  @include borderColor( green, brown, orange, blue);
  @include borderWidth(15px, 30px, 10px, 8px);
}

the output in CSS will be

.box {
  border-top-style: solid;
  border-right-style: solid;
  border-left-style: solid;
  border-bottom-style: solid;
  border-top-color: red;
  border-right-color: pink;
  border-bottom-color: black;
  border-left-color: green;
  border-top-width: 5px;
  border-right-width: 10px;
  border-bottom-width: 20px;
  border-left-width: 3px;
}

.box2 {
  border-top-style: dashed;
  border-right-style: dashed;
  border-left-style: dashed;
  border-bottom-style: dashed;
  border-top-color: green;
  border-right-color: brown;
  border-bottom-color: orange;
  border-left-color: blue;
  border-top-width: 15px;
  border-right-width: 30px;
  border-bottom-width: 10px;
  border-left-width: 8px;
}

Why not specify?

border-style: solid;
border-width: 0 0 3px 10px; // верх, право, низ, лево
border-color: red black green yellow; // верх, право, низ, лево

Updated
https://jsfiddle.net/ouodkeLn/72/