Skip to content

Instantly share code, notes, and snippets.

@standaniels
Last active October 13, 2017 07:53
Show Gist options
  • Save standaniels/5e074988abef1b1eee0394061c35ebbc to your computer and use it in GitHub Desktop.
Save standaniels/5e074988abef1b1eee0394061c35ebbc to your computer and use it in GitHub Desktop.
Whitespace helpers
$gutter-width = 20
$break-sm = 768
$break-md = 992
$break-lg = 1200
$breakpoints = { 'xs': 0 px, 'sm': $break-sm px, 'md': $break-md px, 'lg': $break-lg px }
for bp in $breakpoints
for i in (0...10)
$distance = i * $gutter-width px
@media (min-width $breakpoints[bp])
.margin-{i}-{bp}
margin $distance
.margin-top-{i}-{bp}
margin-top $distance
.margin-right-{i}-{bp}
margin-right $distance
.margin-bottom-{i}-{bp}
margin-bottom $distance
.margin-left-{i}-{bp}
margin-left $distance
.padding-{i}-{bp}
padding $distance
.padding-top-{i}-{bp}
padding-top $distance
.padding-right-{i}-{bp}
padding-right $distance
.padding-bottom-{i}-{bp}
padding-bottom $distance
.padding-left-{i}-{bp}
padding-left $distance
for i in (0...10)
$distance = i * $gutter-width px
.margin-{i}
margin $distance
.margin-top-{i}
margin-top $distance
.margin-right-{i}
margin-right $distance
.margin-bottom-{i}
margin-bottom $distance
.margin-left-{i}
margin-left $distance
.padding-{i}
padding $distance
.padding-top-{i}
padding-top $distance
.padding-right-{i}
padding-right $distance
.padding-bottom-{i}
padding-bottom $distance
.padding-left-{i}
padding-left $distance
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment