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中重复相同的混合

1 个答案: