Margin Padding Generator

SassMeister-input.scss

// ----
// Sass (v3.4.12)
// Compass (v1.0.3)
// ----

//@import "../config/_variables.scss";
// =============================================
// Base :: Settings
// =============================================

$ui-ns: "mui" !default;


// Base Margin / Padding
$base-mp:1em !default;
$base-mp-half: $base-mp / 2 !default;
$base-mp-quarter: $base-mp / 4 !default;

//
// MAPS
//

// Media Queries
$mq-sizes: (
    sm: "min-width: 35.5em",
    md: "min-width: 48em",
    lg: "min-width: 64em",
    xl: "min-width: 80em"
);

$spacer-types: (
	p: padding,
	m: margin
);

$spacer-sizes : (
	w: $base-mp,
	h: $base-mp-half,
	q: $base-mp-quarter,
	n: 0
);

// Spacer Positions
$spacer-positions : (
	_: null,
	t: top,
	r: right,
	b: bottom,
	l: left,
	tb: (t b),
	rl: (r l)
);

//@import "../config/_mixins.scss";
// @mixin spacer
// @description Generated a property-value pair of padding or margin for all sides, one site or opposite sides.
// If the fourth argument is set to true, the output will also include a selector (currently a class name).
// @param $type {String} Type of spacer to be generated: Margin or Padding.
// @param $size {String} w One of four possible sizes: 0, 0.25, 0.5, 1.
// @param $pos {String} _ One of the 4 possible positions (t, r, b, l).
// If not passed '_' (default value) evaluates to 'null'.
// param $generate-helpers {Boolean} false If this value is true the generated output
// includes a selector as well as the property-value pair.
// @usage
//   =@include spacer(p);
//   =@include spacer(p w t);
//   =@include spacer(p n);
//   =@include spacer(p n l);

@mixin spacer ($type:"", $size:w, $pos:_, $generate-helpers: false) {

    $type-long : map-get($spacer-types, $type);
    $value : map-get($spacer-sizes, $size);
    $property: _spacer--property($pos, $type-long, $size);

    @if ($generate-helpers) {
      $class-name: _spacer--classname($pos, $type, $size);

      .#{$class-name} {
        @include _spacer--prop-value ($pos, $type-long, $value, $property);
      }
    }

    @else {
      @include _spacer--prop-value ($pos, $type-long, $value, $property);
    }
}

@function _spacer--property ($pos, $type, $size) {

  $position : map-get($spacer-positions, $pos);
  $property : #{$type}-#{$position};

  // '_' is a reference to the null value defined in $spacer-positions
  @if ($pos == _) {
    @if ($size == w) {
      $property : #{$type};
    }
    @else {
      $property : #{$type};
    }
  }

  @return $property;
}

@mixin _spacer--prop-value ($pos, $type, $value, $property) {

  $pos: map-get($spacer-positions, $pos);

  @if type-of($pos) == list {
    @each $p in $pos {
      $_pos: #{map-get($spacer-positions, $p)};
      #{$type}-#{$_pos} : $value;
    }
  }
  @else {
    #{$property} : $value;
  }

}

@function _spacer--classname ($pos, $type, $size) {
  $class-name: null;

  // '_' is a reference to the null value defined in $spacer-positions
  @if ($pos == _) {
    @if ($size == w) {
      $class-name : "#{$ui-ns}-#{$type}";
    }
    @else {
      $class-name : "#{$ui-ns}-#{$type}-#{$size}";
    }
  }
  @else {
    @if ($size == w) {
      $class-name : "#{$ui-ns}-#{$type}-" + concat($pos);
     }
    @else {
      $class-name : "#{$ui-ns}-#{$type}-#{$size}-" + concat($pos);
    }
  }

  @return $class-name;
}

@function number($number) {
  @return $number / ($number * 0 + 1);
}

/// Concatenate strings provided in $list.
///
/// @param {List} $list List of strings to concatenate.
///
/// @example scss Usage
///   .#{concat(mui-, p)}{
///     padding: 1em;
///   }
///
/// @example css Output
///   .mui-p {
///     padding: 1em;
///   }

@function concat($list) {
  $output: '';
  @each $item in $list {
    $output: $output + '#{$item}';
  }
  @return $output;
}

// ==============================================
// Padding & Margin
// ==============================================

@each $type-key, $type in $spacer-types {
  @each $size-key, $size in $spacer-sizes {
    @each $position-key, $position in $spacer-positions {
      @include spacer($type-key, $size-key, $position-key, true);
    }
  }
}

SassMeister-output.css

.mui-p {
  padding: 1em;
}

.mui-p-t {
  padding-top: 1em;
}

.mui-p-r {
  padding-right: 1em;
}

.mui-p-b {
  padding-bottom: 1em;
}

.mui-p-l {
  padding-left: 1em;
}

.mui-p-tb {
  padding-top: 1em;
  padding-bottom: 1em;
}

.mui-p-rl {
  padding-right: 1em;
  padding-left: 1em;
}

.mui-p-h {
  padding: 0.5em;
}

.mui-p-h-t {
  padding-top: 0.5em;
}

.mui-p-h-r {
  padding-right: 0.5em;
}

.mui-p-h-b {
  padding-bottom: 0.5em;
}

.mui-p-h-l {
  padding-left: 0.5em;
}

.mui-p-h-tb {
  padding-top: 0.5em;
  padding-bottom: 0.5em;
}

.mui-p-h-rl {
  padding-right: 0.5em;
  padding-left: 0.5em;
}

.mui-p-q {
  padding: 0.25em;
}

.mui-p-q-t {
  padding-top: 0.25em;
}

.mui-p-q-r {
  padding-right: 0.25em;
}

.mui-p-q-b {
  padding-bottom: 0.25em;
}

.mui-p-q-l {
  padding-left: 0.25em;
}

.mui-p-q-tb {
  padding-top: 0.25em;
  padding-bottom: 0.25em;
}

.mui-p-q-rl {
  padding-right: 0.25em;
  padding-left: 0.25em;
}

.mui-p-n {
  padding: 0;
}

.mui-p-n-t {
  padding-top: 0;
}

.mui-p-n-r {
  padding-right: 0;
}

.mui-p-n-b {
  padding-bottom: 0;
}

.mui-p-n-l {
  padding-left: 0;
}

.mui-p-n-tb {
  padding-top: 0;
  padding-bottom: 0;
}

.mui-p-n-rl {
  padding-right: 0;
  padding-left: 0;
}

.mui-m {
  margin: 1em;
}

.mui-m-t {
  margin-top: 1em;
}

.mui-m-r {
  margin-right: 1em;
}

.mui-m-b {
  margin-bottom: 1em;
}

.mui-m-l {
  margin-left: 1em;
}

.mui-m-tb {
  margin-top: 1em;
  margin-bottom: 1em;
}

.mui-m-rl {
  margin-right: 1em;
  margin-left: 1em;
}

.mui-m-h {
  margin: 0.5em;
}

.mui-m-h-t {
  margin-top: 0.5em;
}

.mui-m-h-r {
  margin-right: 0.5em;
}

.mui-m-h-b {
  margin-bottom: 0.5em;
}

.mui-m-h-l {
  margin-left: 0.5em;
}

.mui-m-h-tb {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}

.mui-m-h-rl {
  margin-right: 0.5em;
  margin-left: 0.5em;
}

.mui-m-q {
  margin: 0.25em;
}

.mui-m-q-t {
  margin-top: 0.25em;
}

.mui-m-q-r {
  margin-right: 0.25em;
}

.mui-m-q-b {
  margin-bottom: 0.25em;
}

.mui-m-q-l {
  margin-left: 0.25em;
}

.mui-m-q-tb {
  margin-top: 0.25em;
  margin-bottom: 0.25em;
}

.mui-m-q-rl {
  margin-right: 0.25em;
  margin-left: 0.25em;
}

.mui-m-n {
  margin: 0;
}

.mui-m-n-t {
  margin-top: 0;
}

.mui-m-n-r {
  margin-right: 0;
}

.mui-m-n-b {
  margin-bottom: 0;
}

.mui-m-n-l {
  margin-left: 0;
}

.mui-m-n-tb {
  margin-top: 0;
  margin-bottom: 0;
}

.mui-m-n-rl {
  margin-right: 0;
  margin-left: 0;
}