spacing.scss

// ============================================= //
// SPACING VARIABLES                             //
// ============================================= //

$spacing: (
  'Xxl'  50,
  'Xl'   40,
  'L'    30,
  'M'    20,
  'S'    10,
  'Xs'   5,
  'N'    0
);

@each $space in $spacing {
  $size:  nth($space, 1);
  $value: nth($space, 2);

  .u-margin-a#{$size} {
    margin-top: #{$value}px;
    margin-right: #{$value}px;
    margin-left: #{$value}px;
    margin-bottom: #{$value}px;
  }

  .u-margin-t#{$size} { margin-top: #{$value}px; }
  .u-margin-b#{$size} { margin-bottom: #{$value}px; }
  .u-margin-l#{$size} { margin-left: #{$value}px; }
  .u-margin-r#{$size} { margin-right: #{$value}px; }

  .u-margin-lr#{$size} {
    margin-left: #{$value}px;
    margin-right: #{$value}px;
  }
  .u-margin-tb#{$size} {
    margin-top: #{$value}px;
    margin-bottom: #{$value}px;
  }
}