避免在 Sass 中重复相同的 mixin

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' 想法类似..它更短。

避免在 Sass 中重复相同的 mixin

Avoid repeat the same mixin in Sass

sass

mixins