Created
May 29, 2017 22:23
-
-
Save danielhaim1/6c387d0a45b9e7310e7ca44629e6902c to your computer and use it in GitHub Desktop.
Responsive Margin & Padding Shortcuts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Margin and Padding | |
@each $breakpoint in map-keys($grid-breakpoints) { | |
@include media-breakpoint-up($breakpoint) { | |
$infix: breakpoint-infix($breakpoint, $grid-breakpoints); | |
@each $prop, $abbrev in (margin: m, padding: p) { | |
@each $size, $lengths in $spacers { | |
$length-x: map-get($lengths, x); | |
$length-y: map-get($lengths, y); | |
.#{$abbrev}#{$infix}-#{$size} { | |
#{$prop}: $length-y $length-x !important; | |
} | |
.#{$abbrev}t#{$infix}-#{$size} { | |
#{$prop}-top: $length-y !important; | |
} | |
.#{$abbrev}r#{$infix}-#{$size} { | |
#{$prop}-right: $length-x !important; | |
} | |
.#{$abbrev}b#{$infix}-#{$size} { | |
#{$prop}-bottom: $length-y !important; | |
} | |
.#{$abbrev}l#{$infix}-#{$size} { | |
#{$prop}-left: $length-x !important; | |
} | |
.#{$abbrev}x#{$infix}-#{$size} { | |
#{$prop}-right: $length-x !important; | |
#{$prop}-left: $length-x !important; | |
} | |
.#{$abbrev}y#{$infix}-#{$size} { | |
#{$prop}-top: $length-y !important; | |
#{$prop}-bottom: $length-y !important; | |
} | |
} | |
} | |
// Some special margin utils | |
.m#{$infix}-auto { | |
margin: auto !important; | |
} | |
.mt#{$infix}-auto { | |
margin-top: auto !important; | |
} | |
.mr#{$infix}-auto { | |
margin-right: auto !important; | |
} | |
.mb#{$infix}-auto { | |
margin-bottom: auto !important; | |
} | |
.ml#{$infix}-auto { | |
margin-left: auto !important; | |
} | |
.mx#{$infix}-auto { | |
margin-right: auto !important; | |
margin-left: auto !important; | |
} | |
.my#{$infix}-auto { | |
margin-top: auto !important; | |
margin-bottom: auto !important; | |
} | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment