Skip to content

Instantly share code, notes, and snippets.

@JonathanWThom

JonathanWThom/helpers.scss

Last active March 27, 2019 22:35
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save JonathanWThom/a505326e8112f93b25984eeedce92abf to your computer and use it in GitHub Desktop.
Save JonathanWThom/a505326e8112f93b25984eeedce92abf to your computer and use it in GitHub Desktop.
Download ZIP
Generating margin and padding helpers with SASS
Raw
helpers.scss
$styles: margin padding;
$directions: left right top bottom;
@each $style in $styles {
@for $i from 0 through 50 {
.#{$style}-#{$i} { #{$style}: #{$i}px; }
@each $direction in $directions {
.#{$style}-#{$direction}-#{$i} { #{$style}-#{$direction}: #{$i}px }
}
}
}
// Creates:
// .margin-1, .margin-left-1, .margin-right-1, .margin-top-1, .margin-bottom-1 from 1px up to 50px
// .padding-1, .padding-left-1, .padding-right-1, .padding-top-1, .padding-bottom-1 from 1px up to 50px
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment