使用混合的动态保证金值

Question

我想为我按照 SCSS 代码编写的元素添加动态边距

    @function get-spacing($keys...) {
    $list: ();

    @for $i from 1 through length($keys) {
        $key: nth($keys, $i);

        @if map-has-key($global-spacing, $key) {
            @if length($keys) == 1 {
                $list: map-get($global-spacing, $key) * 1px;
            }
            @else {
                $list: append($list, map-get($global-spacing, $key) * 1px, space);
            }
        }
        @else {
            @error '#{$key} does not exist in the $global-spacing map.  Allowed values are #{$global-spacing}.';
            @return null;
        }
    }

    @return $list;
}


// margin and padding values array
$space-values : (
  0,
  3,
  5,
  10,
  15,
  20,
  25,
  30,
  35,
  40,
  45,
  50,
  auto
) !default;

// margin and padding shorthands
$space-prefixes : (
  u-p  : padding,
  u-pt : padding-top,
  u-pr : padding-right,
  u-pb : padding-bottom,
  u-pl : padding-left,
  u-m  : margin,
  u-mt : margin-top,
  u-mr : margin-right,
  u-mb : margin-bottom,
  u-ml : margin-left,
  u-ml-auto : margin-left
) !default;

@mixin make-spaces() {
  @each $attr-short, $attr-long in $space-prefixes { 
    @each $value in $space-values {
      .#{$attr-short}-#{$value} {
        #{$attr-long}: #{$value}#{'px'};
      }
    }
  }
}

@include make-spaces();

我的问题是如果我给 class .u-ml-3 然后它应用正确但如果我给 class .u-ml-auto 然后 margin-left:auto 不采取。像素格式的值是正确的，但是当我想应用边距自动时，它没有正确应用。请帮助我。谢谢

Answer 1

@function get-spacing($keys...) {
    $list: ();

    @for $i from 1 through length($keys) {
        $key: nth($keys, $i);

        @if map-has-key($global-spacing, $key) {
            @if length($keys) == 1 {
                $list: map-get($global-spacing, $key) * 1px;
            }
            @else {
                $list: append($list, map-get($global-spacing, $key) * 1px, space);
            }
        }
        @else {
            @error '#{$key} does not exist in the $global-spacing map.  Allowed values are #{$global-spacing}.';
            @return null;
        }
    }

    @return $list;
}


// margin and padding values array
$space-values : (
  0,
  3,
  5,
  10,
  15,
  20,
  25,
  30,
  35,
  40,
  45,
  50,
  auto
) !default;

// margin and padding shorthands
$space-prefixes : (
  u-p  : padding,
  u-pt : padding-top,
  u-pr : padding-right,
  u-pb : padding-bottom,
  u-pl : padding-left,
  u-m  : margin,
  u-mt : margin-top,
  u-mr : margin-right,
  u-mb : margin-bottom,
  u-ml : margin-left,
  u-ml-auto : margin-left
) !default;

@mixin make-spaces() {
  @each $attr-short, $attr-long in $space-prefixes { 
    @each $value in $space-values {
      .#{$attr-short}-#{$value} {
        @if $value == 'auto'{ /*add the @if loop*/
          #{$attr-long}:#{$value};
        }
        @else{
        #{$attr-long}: #{$value}#{'px'};
        }
      }
    }
  }
}

@include make-spaces();

因为

的 css 输出

.u-ml-auto {
  margin-left: autopx; //autopx is invalid css rule
}

使用混合的动态保证金值

Dynamic margin value using mixins

css

sass

mixins

scss-mixins