CODEWITHSUNDEEP
csssassmixinsscss-mixins
vedankita kumbhar
vedankita kumbhar

Reputation: 1490

Dynamic margin value using mixins

I want to add dynamic margins to elements for that I have written following SCSS code

    @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();

My problem is if I give class .u-ml-3 then its applying correctly but if I give class .u-ml-auto then margin-left:auto not taking. Value in pixel format is taking correctly but when I want to apply margin auto then its not applying properly. Please help me in this. Thanks

Upvotes: 1

Views: 817

Answers (1)

Chandra Shekhar
Chandra Shekhar

Reputation: 3749

@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();

because the css output for 

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

Upvotes: 1

Related Questions