$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. Добей условиями. Можно продолжить и ещё создать классы под разные стили, цвета рамок. Простор для бесполезного творчества.
