Skip to content

Instantly share code, notes, and snippets.

@skylarmb
Last active January 9, 2017 22:54
Show Gist options
  • Save skylarmb/258236d9887041b2e78e26c02e963a11 to your computer and use it in GitHub Desktop.
Save skylarmb/258236d9887041b2e78e26c02e963a11 to your computer and use it in GitHub Desktop.
Loop for generating padding and margin classes

Loop for generating padding and margin classes

/* Margins and Padding */
$sizes: (
  xs: 5px,
  s: 8px,
  m: 10px,
  l: 20px,
  xl: 25px,
);

@each $size, $value in $sizes {
  @each $offset in margin, padding {
    /* Horizontal and vertical */
    .#{$offset}-horizontal-#{$size} {
      margin: 0 $value;
    }
    .#{$offset}-vertical-#{$size} {
      margin: $value 0;
    }
    /* Individual sides */
    @each $side in top, left, bottom, right {
      .#{$offset}-#{$side}-#{$size}{
        #{$offset}-#{$side}: $value;
      }
    }
  }
}

Compiles to:

/* Margins and Padding */
/* Horizontal and vertical */
.margin-horizontal-xs {
  margin: 0 5px;
}
.margin-vertical-xs {
  margin: 5px 0;
}
/* Individual sides */
.margin-top-xs {
  margin-top: 5px;
}
.margin-left-xs {
  margin-left: 5px;
}
.margin-bottom-xs {
  margin-bottom: 5px;
}
.margin-right-xs {
  margin-right: 5px;
}
/* Horizontal and vertical */
.padding-horizontal-xs {
  padding: 0 5px;
}
.padding-vertical-xs {
  padding: 5px 0;
}
/* Individual sides */
.padding-top-xs {
  padding-top: 5px;
}
.padding-left-xs {
  padding-left: 5px;
}
...

and so on

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment