Skip to content

Instantly share code, notes, and snippets.

@elliotrpmorris-zz
Created March 8, 2019 15:02
Show Gist options
  • Save elliotrpmorris-zz/b817c21bd4872cd5aee31ee3b70769dc to your computer and use it in GitHub Desktop.
Save elliotrpmorris-zz/b817c21bd4872cd5aee31ee3b70769dc to your computer and use it in GitHub Desktop.
SASS Padding margin class loop
// Adjust this to be the rem size you need
$spaceamounts: (
8: 0.5,
16: 1,
24: 1.5,
32: 2,
40: 2.5,
48: 3,
56: 3.5,
64: 4,
72: 4.5,
80: 5,
88: 5.5,
96: 6,
104: 6.5,
112: 7,
);
$sides: (all, top, bottom, left, right);
// Margin & padding
@each $key, $value in $spaceamounts {
@each $side in $sides {
.m-#{str-slice($side, 0, 1)}-#{$key} {
margin-#{$side}: #{$value}rem;
}
.p-#{str-slice($side, 0, 1)}-#{$key} {
padding-#{$side}: #{$value}rem;
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment