Избегайте повторять один и тот же подмешать в Sass

Question

Я это Mixin для padding утилиты:

Sass код:

$padding: (
    top: "top", 
    right: "right", 
    bottom: "bottom", 
    left: "left", 
    all: "all" 
); 

@mixin no-padding($map) { 
    @each $padding-side, $side in $map { 
     @if $side == 'all' { 
      & { 
       padding: 0 !important; 
      } 
     } @else { 
      &-#{$side} { 
       padding-#{$side}: 0 !important; 
      } 
     } 
    } 
} 

Использование этого:

.u-noPadding { 
    @include no-padding($padding); 
} 

Я хочу использовать тот же Mixin но теперь для margin, есть ли решение избежать повторения того же mixin и хорошо использовать лучшие практики?

Answer 1

@mixin no($type,$sides:null) { 
    $i:0 !important; 
    @if $sides == null { 
     #{$type}:$i; 
    } @else { 
     @each $side in $sides { 
      #{$type}-#{$side}:$i; 
     } 
    } 
} 

.u-noPadding { 
    @include no(padding, top left etc...);  // choose any side separated with a space 
} 
.u-noMargin { 
    @include no(margin);       // instead of 'all', type nothing 
} 

Нравится? Ваш $sides будет автоматически сохранен на временной карте, если установлен второй параметр, для этого не требуется дополнительная карта. О втором параметре: Если вы не хотите сторон, пусть он пуст, и все стороны будут иметь 0. Совместим с вашей идеей 'all' .. она короче.