Skip to content

Instantly share code, notes, and snippets.

@1stevengrant
Created March 9, 2016 12:01
Show Gist options
  • Save 1stevengrant/3dbcac2d6f4421f1017c to your computer and use it in GitHub Desktop.
Save 1stevengrant/3dbcac2d6f4421f1017c to your computer and use it in GitHub Desktop.
I wanted a way to generate helper classes for paddings and margins without having to add them all individually. The result is a Sass list containing my values and then looping over these to give me ```.M-T--0 .M-T--1``` etc.
$margin-sides : ("A": "margin", "T": "margin-top", "R": "margin-right", "B": "margin-bottom", "L": "margin-left")
$padding-sides : ("A": "padding", "T": "padding-top", "R": "padding-right", "B": "padding-bottom", "L": "padding-left")
$sizes : (0: 0, 1: 1em, 2: 2em, 3: 3em, 4: 4em)
@each $side, $property in $margin-sides
@each $key, $value in $sizes
.M-#{$side}--#{$key}
#{$property}: $value
@each $side, $property in $padding-sides
@each $key, $value in $sizes
.P-#{$side}--#{$key}
#{$property}: $value
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment