如果map有名为null的键，SASS/SCSS删除连字符(-)？

Question

我希望删除连字符(-)，如果map $spacers有一个名为null的键。这意味着它只返回className，在这种情况下，它称为m，而没有连字符(-)。

$spacers: (
  0: 0,
  1: 1px,
  2: 2px,
  null: 3px,
  4: 4px,
  8: 8px
) !default;

@each $prop, $abbrev in (margin: m) {
   @each $size, $length in $spacers {
      .#{$abbrev}-#{$size} {
         #{$prop}: $length !important;
      }
   }
}

编译后得到的结果:

.m-0 {
  margin: 0 !important;
}

.m-1 {
  margin: 1px !important;
}

.m-2 {
  margin: 2px !important;
}

// hyphen(-) shouldn't be here
.m- {
  margin: 3px !important;
}

.m-4 {
  margin: 4px !important;
}

.m-8 {
  margin: 8px !important;
}

Answer 1

使用@if和@else。

@each $prop, $abbrev in (margin: m) {
    @each $size, $length in $spacers {
        @if $size {
            .#{$abbrev}-#{$size} {
                #{$prop}: $length !important;
            }
        } @else {
            .#{$abbrev} {
                #{$prop}: $length !important;
            }
        }
    }
}