Created
August 30, 2017 23:32
-
-
Save ivanignat/3726d3687e11cd8e3fd4bd515be6afa2 to your computer and use it in GitHub Desktop.
margin and padding shorthands classes
This file contains hidden or 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
| $use-bootstrap: false; | |
| // margin and padding values array | |
| $space-values: (0, 5, 10, 15, 20, 25, 30, 40, 50) !default; | |
| // margin and padding shorthands | |
| $space-prefixes: (p : padding, pt : padding-top, pr : padding-right, pb : padding-bottom, pl : padding-left, m : margin, mt : margin-top, mr : margin-right, mb : margin-bottom, ml : margin-left) !default; | |
| // if not using bootstrap | |
| $grid-breakpoints-custom: (xs: 0, sm: 480px, md: 768px, lg: 960px, xl: 1280px) !default; | |
| $breakpoints: $grid-breakpoints-custom; | |
| @if $use-bootstrap { | |
| $breakpoints: $grid-breakpoints; | |
| } | |
| // main function definition | |
| @mixin make-space($values, $prefixes, $breakpoints) { | |
| @each $breakpoint-name, $breakpoint-value in $breakpoints { | |
| // don't use media queries if xs value is 0 | |
| @if ($breakpoint-value == 0) { | |
| @each $attr-short, $attr-long in $prefixes { | |
| @each $value in $values { | |
| .#{$breakpoint-name}-#{$attr-short}-#{$value} { | |
| #{$attr-long}: #{$value}px; | |
| } | |
| } | |
| } | |
| } | |
| @else { | |
| @media screen and (min-width: $breakpoint-value) { | |
| @each $attr-short, $attr-long in $prefixes { | |
| @each $value in $values { | |
| .#{$breakpoint-name}-#{$attr-short}-#{$value} { | |
| #{$attr-long}: #{$value}px; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| } | |
| } | |
| @include make-space($space-values, $space-prefixes, $breakpoints); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment