Generation rules helpers

helpers.scss

$aroundXYList: top, left, bottom, right;

$sizeList: (
     0: 0,
     2: 0.2rem,
     4: 0.4rem,
     6: 0.6rem,
     8: 0.8rem,
    10: 1rem,
    12: 1.2rem,
    14: 1.4rem,
    16: 1.6rem,
    18: 1.8rem,
    20: 2rem
);


$sizeHelpers: (
  'font-size': $sizeList,
  'margin:xy': $sizeList,
  'padding:xy': $sizeList,
);

@each $prop, $map in $sizeHelpers {

  @each $sizeName, $sizeValue in $map {

    @if ( str-index($prop, ':xy') ) {
      $_prop: str-slice($prop, 1, str-length($prop) - 3);
      @each $around in $aroundXYList {
        .#{$_prop}-#{$around}-#{$sizeName} {
          #{$_prop}-#{$around}: $sizeValue;
        }
      }
      .#{$_prop}-#{$sizeName} {
        #{$_prop}: $sizeValue;
      }
    }

    @else {
      .#{$prop}-#{$sizeName} {
        #{$prop}: $sizeValue;
      }
    }

  }
}