Automated utility class creation using Sass functions & maps

Utility Class

// Used for float and text-alignment functions
$device-sizes: (
  $screen-sm-min: "sm",
  $screen-md-min: "md",
  $screen-lg-min: "lg"
);

/* Stackable floats */

/* 👉 Example: .sm-pull-left would float an object left on small screens, while .md-pull-right would float an object right on medium-sized screens */

// 🚨 $_floats-directions variable are only used in the creation of pull-left/-right classes
$_floats-directions: ("right", "left");

// For each defined screen-width, create a class/media query ($device-sizes)
@each $screen, $size in $device-sizes {

  // For each newly created class/media query, add a float-left and float-right rule ($_floats-direction)
  @each $direction in $_floats-directions {
    @media only screen and (min-width: $screen) {
      .#{$size}-pull-#{$direction} {
        float: #{$direction};
      }
    }
  }
}

/* Stackable text alignment */

/* 👉 Example: .sm-text-left would align text to the left on small screens, while .md-text-center would align text in the center on medium-sized screens */

// 🚨 $_text-alignments variable are only used in the creation of text-align classes
$_text-alignments: ("right", "left", "center");

// For each defined screen-width, create a class/media query ($device-sizes)
@each $screen, $size in $device-sizes {

  // For each newly created class/media query, add each text-alignment rule ($_text-alignments)
  @each $align in $_text-alignments {
    @media only screen and (min-width: $screen) {
      .#{$size}-text-#{$align} {
        text-align: #{$align};
      }
    }
  }
}

/* Margin/Padding Rules */

// 🚨 @mixin _spacing-* are only used in the creation of spacing classes (+/- padding/margin)
@mixin _spacing-mobile-mq {
  @media only screen and (max-width: $screen-sm-min) {
    @content;
  }
}
@mixin _spacing-ends($property, $value) {
  #{$property}-top: $value;
  #{$property}-bottom: $value;
}
@mixin _spacing-sides($property, $value) {
  #{$property}-right: $value;
  #{$property}-left: $value;
}

// 🚨 $_spacing-* variables are only used in the creation of spacing classes (+/- padding/margin)
$_spacing-classes: (
  "push": "margin",
  "flush": "margin",
  "hard": "padding",
  "soft": "padding"
);
$_spacing-sides: (" ", "-top", "-right", "-bottom", "-left");

// Spacing classes -- start

// For each key/value in $_spacing-classes, create a class/rule and assign value to $value
@each $class, $property in $_spacing-classes {
  @if $class == "push" {
    $value: $line-height-computed !global;
  } @else if $class == "flush" {
    $value: 0 !global;
  } @else if $class == "hard" {
    $value: 0 !global;
  } @else if $class == "soft" {
    $value: $line-height-computed !global;
  }

  // For each class/rule created above, create a desktop and mobile class appending each side to the class/rule
  @each $side in $_spacing-sides {
    .#{$class}#{$side} {
      #{$property}#{$side} : $value;
    }
    .mobile-#{$class}#{$side} {
      @include _spacing-mobile-mq { #{$property}#{$side}: $value };
    }

    @if $value == $line-height-computed {
      .#{$class}-half#{$side} {
        #{$property}#{$side} : $value / 2;
      }
      .mobile-#{$class}-half#{$side} {
        @include _spacing-mobile-mq { #{$property}#{$side}: $value / 2 };
      }
      .#{$class}-quarter#{$side} {
        #{$property}#{$side} : $value / 4;
      }
      .mobile-#{$class}-quarter#{$side} {
        @include _spacing-mobile-mq { #{$property}#{$side}: $value / 4 };
      }
    }
  }

  .#{$class}-sides {
    @include _spacing-sides(#{$property}, $value);
  }
  .mobile-#{$class}-sides {
    @include _spacing-mobile-mq {
      #{$property}-right: $value;
      #{$property}-left: $value;
    };
  }
  .#{$class}-ends {
    @include _spacing-ends(#{$property}, $value);
  }
  .mobile-#{$class}-ends {
    @include _spacing-mobile-mq {
      #{$property}-top: $value;
      #{$property}-bottom: $value;
    };
  }

  @if $value == $line-height-computed {
    .#{$class}-half-sides {
      @include _spacing-sides(#{$property}, $value / 2);
    }
    .mobile-#{$class}-half-sides {
      @include _spacing-mobile-mq {
        #{$property}-right: $value / 2;
        #{$property}-left: $value / 2;
      };
    }
    .#{$class}-half-ends {
      @include _spacing-sides(#{$property}, $value / 2);
    }
    .mobile-#{$class}-half-ends {
      @include _spacing-mobile-mq {
        #{$property}-top: $value / 2;
        #{$property}-bottom: $value / 2;
      };
    }
  }
}
// Spacing classes -- end