Как правильно написать классы в sass для border (top,right,bottom,left)?

Question

[Fredd Monty]

Как правильно продумать и записать в sass?
Что бы в css получилось что-то на подобии :

.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;
}

и так до 5 px

Как правильно написать миксин, переменные?
Для цвета буду использовать перем. $primary и т.д.
Как правильно построить схему в голове?
Спасибо за любую помощь!

Comments

[sim3x]

Зачем отдельно для каждого края?

[Fredd Monty]

sim3x, Что вы имеете ввиду?
Что бы поставить линию на блоке с любого края. Если я правильно понял ваш вопрос.

[sim3x]

Fredd Monty, отдельно зачем?

Answer 1

[display: block]

$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);
}

Только получится .b-1, вместо просто .b. Добей условиями. Можно продолжить и ещё создать классы под разные стили, цвета рамок. Простор для бесполезного творчества.

Answer 2

[boga-net]

Примеси

@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);
}

на выходе в CSS получите

.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;
}

Почему не указать ?

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

Обновил
https://jsfiddle.net/ouodkeLn/72/