Created
January 20, 2020 18:39
-
-
Save zastrow/eb31706547ce9f88773eae579859251e to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
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
| // ---- | |
| // Sass (vundefined) | |
| // Compass (vundefined) | |
| // dart-sass (v1.18.0) | |
| // ---- | |
| $grid-breakpoints: ( | |
| sm: 30rem, | |
| md: 40rem, | |
| lg: 60rem, | |
| xl: 80rem, | |
| print: print | |
| ); | |
| // Auto-generates media queries for looping content | |
| @mixin loop-mq { | |
| @content($suffix:null); | |
| @each $key, $val in $grid-breakpoints { | |
| @media (min-width: #{$val}) { | |
| $suffix: "\\@" + $key; | |
| @content($suffix); | |
| } | |
| } | |
| } | |
| // Key | |
| // all = All. top, right, bottom, left will have the same value. | |
| // top = Top. Just the value of will be applied to the top | |
| // rgt = Right. Just the value of will be applied to the right | |
| // btm = Bottom. Just the value of will be applied to the bottom | |
| // lft = Left. Just the value of will be applied to the left | |
| // vrt = Vertical. top and bottom will have the same value. | |
| // hrz = Horizontal. right and left will have the same value. | |
| $limit: 4; | |
| @for $i from 0 through $limit { | |
| $val: $i + rem; | |
| .util-pad { | |
| @include loop-mq() using($suffix) { | |
| &-all#{$i}#{$suffix} { | |
| padding: $val; | |
| } | |
| &-top#{$i}#{$suffix} { | |
| padding-top: $val; | |
| } | |
| &-lft#{$i}#{$suffix} { | |
| padding-left: $val; | |
| } | |
| &-rgt#{$i}#{$suffix} { | |
| padding-right: $val; | |
| } | |
| &-btm#{$i}#{$suffix} { | |
| padding-bottom: $val; | |
| } | |
| &-vrt#{$i}#{$suffix} { | |
| padding-top: $val; | |
| padding-bottom: $val; | |
| } | |
| &-hrz#{$i}#{$suffix} { | |
| padding-left: $val; | |
| padding-right: $val; | |
| } | |
| } | |
| } | |
| } |
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
| .util-pad-all0 { | |
| padding: 0rem; | |
| } | |
| .util-pad-top0 { | |
| padding-top: 0rem; | |
| } | |
| .util-pad-lft0 { | |
| padding-left: 0rem; | |
| } | |
| .util-pad-rgt0 { | |
| padding-right: 0rem; | |
| } | |
| .util-pad-btm0 { | |
| padding-bottom: 0rem; | |
| } | |
| .util-pad-vrt0 { | |
| padding-top: 0rem; | |
| padding-bottom: 0rem; | |
| } | |
| .util-pad-hrz0 { | |
| padding-left: 0rem; | |
| padding-right: 0rem; | |
| } | |
| @media (min-width: 30rem) { | |
| .util-pad-all0\@sm { | |
| padding: 0rem; | |
| } | |
| .util-pad-top0\@sm { | |
| padding-top: 0rem; | |
| } | |
| .util-pad-lft0\@sm { | |
| padding-left: 0rem; | |
| } | |
| .util-pad-rgt0\@sm { | |
| padding-right: 0rem; | |
| } | |
| .util-pad-btm0\@sm { | |
| padding-bottom: 0rem; | |
| } | |
| .util-pad-vrt0\@sm { | |
| padding-top: 0rem; | |
| padding-bottom: 0rem; | |
| } | |
| .util-pad-hrz0\@sm { | |
| padding-left: 0rem; | |
| padding-right: 0rem; | |
| } | |
| } | |
| @media (min-width: 40rem) { | |
| .util-pad-all0\@md { | |
| padding: 0rem; | |
| } | |
| .util-pad-top0\@md { | |
| padding-top: 0rem; | |
| } | |
| .util-pad-lft0\@md { | |
| padding-left: 0rem; | |
| } | |
| .util-pad-rgt0\@md { | |
| padding-right: 0rem; | |
| } | |
| .util-pad-btm0\@md { | |
| padding-bottom: 0rem; | |
| } | |
| .util-pad-vrt0\@md { | |
| padding-top: 0rem; | |
| padding-bottom: 0rem; | |
| } | |
| .util-pad-hrz0\@md { | |
| padding-left: 0rem; | |
| padding-right: 0rem; | |
| } | |
| } | |
| @media (min-width: 60rem) { | |
| .util-pad-all0\@lg { | |
| padding: 0rem; | |
| } | |
| .util-pad-top0\@lg { | |
| padding-top: 0rem; | |
| } | |
| .util-pad-lft0\@lg { | |
| padding-left: 0rem; | |
| } | |
| .util-pad-rgt0\@lg { | |
| padding-right: 0rem; | |
| } | |
| .util-pad-btm0\@lg { | |
| padding-bottom: 0rem; | |
| } | |
| .util-pad-vrt0\@lg { | |
| padding-top: 0rem; | |
| padding-bottom: 0rem; | |
| } | |
| .util-pad-hrz0\@lg { | |
| padding-left: 0rem; | |
| padding-right: 0rem; | |
| } | |
| } | |
| @media (min-width: 80rem) { | |
| .util-pad-all0\@xl { | |
| padding: 0rem; | |
| } | |
| .util-pad-top0\@xl { | |
| padding-top: 0rem; | |
| } | |
| .util-pad-lft0\@xl { | |
| padding-left: 0rem; | |
| } | |
| .util-pad-rgt0\@xl { | |
| padding-right: 0rem; | |
| } | |
| .util-pad-btm0\@xl { | |
| padding-bottom: 0rem; | |
| } | |
| .util-pad-vrt0\@xl { | |
| padding-top: 0rem; | |
| padding-bottom: 0rem; | |
| } | |
| .util-pad-hrz0\@xl { | |
| padding-left: 0rem; | |
| padding-right: 0rem; | |
| } | |
| } | |
| @media (min-width: print) { | |
| .util-pad-all0\@print { | |
| padding: 0rem; | |
| } | |
| .util-pad-top0\@print { | |
| padding-top: 0rem; | |
| } | |
| .util-pad-lft0\@print { | |
| padding-left: 0rem; | |
| } | |
| .util-pad-rgt0\@print { | |
| padding-right: 0rem; | |
| } | |
| .util-pad-btm0\@print { | |
| padding-bottom: 0rem; | |
| } | |
| .util-pad-vrt0\@print { | |
| padding-top: 0rem; | |
| padding-bottom: 0rem; | |
| } | |
| .util-pad-hrz0\@print { | |
| padding-left: 0rem; | |
| padding-right: 0rem; | |
| } | |
| } | |
| .util-pad-all1 { | |
| padding: 1rem; | |
| } | |
| .util-pad-top1 { | |
| padding-top: 1rem; | |
| } | |
| .util-pad-lft1 { | |
| padding-left: 1rem; | |
| } | |
| .util-pad-rgt1 { | |
| padding-right: 1rem; | |
| } | |
| .util-pad-btm1 { | |
| padding-bottom: 1rem; | |
| } | |
| .util-pad-vrt1 { | |
| padding-top: 1rem; | |
| padding-bottom: 1rem; | |
| } | |
| .util-pad-hrz1 { | |
| padding-left: 1rem; | |
| padding-right: 1rem; | |
| } | |
| @media (min-width: 30rem) { | |
| .util-pad-all1\@sm { | |
| padding: 1rem; | |
| } | |
| .util-pad-top1\@sm { | |
| padding-top: 1rem; | |
| } | |
| .util-pad-lft1\@sm { | |
| padding-left: 1rem; | |
| } | |
| .util-pad-rgt1\@sm { | |
| padding-right: 1rem; | |
| } | |
| .util-pad-btm1\@sm { | |
| padding-bottom: 1rem; | |
| } | |
| .util-pad-vrt1\@sm { | |
| padding-top: 1rem; | |
| padding-bottom: 1rem; | |
| } | |
| .util-pad-hrz1\@sm { | |
| padding-left: 1rem; | |
| padding-right: 1rem; | |
| } | |
| } | |
| @media (min-width: 40rem) { | |
| .util-pad-all1\@md { | |
| padding: 1rem; | |
| } | |
| .util-pad-top1\@md { | |
| padding-top: 1rem; | |
| } | |
| .util-pad-lft1\@md { | |
| padding-left: 1rem; | |
| } | |
| .util-pad-rgt1\@md { | |
| padding-right: 1rem; | |
| } | |
| .util-pad-btm1\@md { | |
| padding-bottom: 1rem; | |
| } | |
| .util-pad-vrt1\@md { | |
| padding-top: 1rem; | |
| padding-bottom: 1rem; | |
| } | |
| .util-pad-hrz1\@md { | |
| padding-left: 1rem; | |
| padding-right: 1rem; | |
| } | |
| } | |
| @media (min-width: 60rem) { | |
| .util-pad-all1\@lg { | |
| padding: 1rem; | |
| } | |
| .util-pad-top1\@lg { | |
| padding-top: 1rem; | |
| } | |
| .util-pad-lft1\@lg { | |
| padding-left: 1rem; | |
| } | |
| .util-pad-rgt1\@lg { | |
| padding-right: 1rem; | |
| } | |
| .util-pad-btm1\@lg { | |
| padding-bottom: 1rem; | |
| } | |
| .util-pad-vrt1\@lg { | |
| padding-top: 1rem; | |
| padding-bottom: 1rem; | |
| } | |
| .util-pad-hrz1\@lg { | |
| padding-left: 1rem; | |
| padding-right: 1rem; | |
| } | |
| } | |
| @media (min-width: 80rem) { | |
| .util-pad-all1\@xl { | |
| padding: 1rem; | |
| } | |
| .util-pad-top1\@xl { | |
| padding-top: 1rem; | |
| } | |
| .util-pad-lft1\@xl { | |
| padding-left: 1rem; | |
| } | |
| .util-pad-rgt1\@xl { | |
| padding-right: 1rem; | |
| } | |
| .util-pad-btm1\@xl { | |
| padding-bottom: 1rem; | |
| } | |
| .util-pad-vrt1\@xl { | |
| padding-top: 1rem; | |
| padding-bottom: 1rem; | |
| } | |
| .util-pad-hrz1\@xl { | |
| padding-left: 1rem; | |
| padding-right: 1rem; | |
| } | |
| } | |
| @media (min-width: print) { | |
| .util-pad-all1\@print { | |
| padding: 1rem; | |
| } | |
| .util-pad-top1\@print { | |
| padding-top: 1rem; | |
| } | |
| .util-pad-lft1\@print { | |
| padding-left: 1rem; | |
| } | |
| .util-pad-rgt1\@print { | |
| padding-right: 1rem; | |
| } | |
| .util-pad-btm1\@print { | |
| padding-bottom: 1rem; | |
| } | |
| .util-pad-vrt1\@print { | |
| padding-top: 1rem; | |
| padding-bottom: 1rem; | |
| } | |
| .util-pad-hrz1\@print { | |
| padding-left: 1rem; | |
| padding-right: 1rem; | |
| } | |
| } | |
| .util-pad-all2 { | |
| padding: 2rem; | |
| } | |
| .util-pad-top2 { | |
| padding-top: 2rem; | |
| } | |
| .util-pad-lft2 { | |
| padding-left: 2rem; | |
| } | |
| .util-pad-rgt2 { | |
| padding-right: 2rem; | |
| } | |
| .util-pad-btm2 { | |
| padding-bottom: 2rem; | |
| } | |
| .util-pad-vrt2 { | |
| padding-top: 2rem; | |
| padding-bottom: 2rem; | |
| } | |
| .util-pad-hrz2 { | |
| padding-left: 2rem; | |
| padding-right: 2rem; | |
| } | |
| @media (min-width: 30rem) { | |
| .util-pad-all2\@sm { | |
| padding: 2rem; | |
| } | |
| .util-pad-top2\@sm { | |
| padding-top: 2rem; | |
| } | |
| .util-pad-lft2\@sm { | |
| padding-left: 2rem; | |
| } | |
| .util-pad-rgt2\@sm { | |
| padding-right: 2rem; | |
| } | |
| .util-pad-btm2\@sm { | |
| padding-bottom: 2rem; | |
| } | |
| .util-pad-vrt2\@sm { | |
| padding-top: 2rem; | |
| padding-bottom: 2rem; | |
| } | |
| .util-pad-hrz2\@sm { | |
| padding-left: 2rem; | |
| padding-right: 2rem; | |
| } | |
| } | |
| @media (min-width: 40rem) { | |
| .util-pad-all2\@md { | |
| padding: 2rem; | |
| } | |
| .util-pad-top2\@md { | |
| padding-top: 2rem; | |
| } | |
| .util-pad-lft2\@md { | |
| padding-left: 2rem; | |
| } | |
| .util-pad-rgt2\@md { | |
| padding-right: 2rem; | |
| } | |
| .util-pad-btm2\@md { | |
| padding-bottom: 2rem; | |
| } | |
| .util-pad-vrt2\@md { | |
| padding-top: 2rem; | |
| padding-bottom: 2rem; | |
| } | |
| .util-pad-hrz2\@md { | |
| padding-left: 2rem; | |
| padding-right: 2rem; | |
| } | |
| } | |
| @media (min-width: 60rem) { | |
| .util-pad-all2\@lg { | |
| padding: 2rem; | |
| } | |
| .util-pad-top2\@lg { | |
| padding-top: 2rem; | |
| } | |
| .util-pad-lft2\@lg { | |
| padding-left: 2rem; | |
| } | |
| .util-pad-rgt2\@lg { | |
| padding-right: 2rem; | |
| } | |
| .util-pad-btm2\@lg { | |
| padding-bottom: 2rem; | |
| } | |
| .util-pad-vrt2\@lg { | |
| padding-top: 2rem; | |
| padding-bottom: 2rem; | |
| } | |
| .util-pad-hrz2\@lg { | |
| padding-left: 2rem; | |
| padding-right: 2rem; | |
| } | |
| } | |
| @media (min-width: 80rem) { | |
| .util-pad-all2\@xl { | |
| padding: 2rem; | |
| } | |
| .util-pad-top2\@xl { | |
| padding-top: 2rem; | |
| } | |
| .util-pad-lft2\@xl { | |
| padding-left: 2rem; | |
| } | |
| .util-pad-rgt2\@xl { | |
| padding-right: 2rem; | |
| } | |
| .util-pad-btm2\@xl { | |
| padding-bottom: 2rem; | |
| } | |
| .util-pad-vrt2\@xl { | |
| padding-top: 2rem; | |
| padding-bottom: 2rem; | |
| } | |
| .util-pad-hrz2\@xl { | |
| padding-left: 2rem; | |
| padding-right: 2rem; | |
| } | |
| } | |
| @media (min-width: print) { | |
| .util-pad-all2\@print { | |
| padding: 2rem; | |
| } | |
| .util-pad-top2\@print { | |
| padding-top: 2rem; | |
| } | |
| .util-pad-lft2\@print { | |
| padding-left: 2rem; | |
| } | |
| .util-pad-rgt2\@print { | |
| padding-right: 2rem; | |
| } | |
| .util-pad-btm2\@print { | |
| padding-bottom: 2rem; | |
| } | |
| .util-pad-vrt2\@print { | |
| padding-top: 2rem; | |
| padding-bottom: 2rem; | |
| } | |
| .util-pad-hrz2\@print { | |
| padding-left: 2rem; | |
| padding-right: 2rem; | |
| } | |
| } | |
| .util-pad-all3 { | |
| padding: 3rem; | |
| } | |
| .util-pad-top3 { | |
| padding-top: 3rem; | |
| } | |
| .util-pad-lft3 { | |
| padding-left: 3rem; | |
| } | |
| .util-pad-rgt3 { | |
| padding-right: 3rem; | |
| } | |
| .util-pad-btm3 { | |
| padding-bottom: 3rem; | |
| } | |
| .util-pad-vrt3 { | |
| padding-top: 3rem; | |
| padding-bottom: 3rem; | |
| } | |
| .util-pad-hrz3 { | |
| padding-left: 3rem; | |
| padding-right: 3rem; | |
| } | |
| @media (min-width: 30rem) { | |
| .util-pad-all3\@sm { | |
| padding: 3rem; | |
| } | |
| .util-pad-top3\@sm { | |
| padding-top: 3rem; | |
| } | |
| .util-pad-lft3\@sm { | |
| padding-left: 3rem; | |
| } | |
| .util-pad-rgt3\@sm { | |
| padding-right: 3rem; | |
| } | |
| .util-pad-btm3\@sm { | |
| padding-bottom: 3rem; | |
| } | |
| .util-pad-vrt3\@sm { | |
| padding-top: 3rem; | |
| padding-bottom: 3rem; | |
| } | |
| .util-pad-hrz3\@sm { | |
| padding-left: 3rem; | |
| padding-right: 3rem; | |
| } | |
| } | |
| @media (min-width: 40rem) { | |
| .util-pad-all3\@md { | |
| padding: 3rem; | |
| } | |
| .util-pad-top3\@md { | |
| padding-top: 3rem; | |
| } | |
| .util-pad-lft3\@md { | |
| padding-left: 3rem; | |
| } | |
| .util-pad-rgt3\@md { | |
| padding-right: 3rem; | |
| } | |
| .util-pad-btm3\@md { | |
| padding-bottom: 3rem; | |
| } | |
| .util-pad-vrt3\@md { | |
| padding-top: 3rem; | |
| padding-bottom: 3rem; | |
| } | |
| .util-pad-hrz3\@md { | |
| padding-left: 3rem; | |
| padding-right: 3rem; | |
| } | |
| } | |
| @media (min-width: 60rem) { | |
| .util-pad-all3\@lg { | |
| padding: 3rem; | |
| } | |
| .util-pad-top3\@lg { | |
| padding-top: 3rem; | |
| } | |
| .util-pad-lft3\@lg { | |
| padding-left: 3rem; | |
| } | |
| .util-pad-rgt3\@lg { | |
| padding-right: 3rem; | |
| } | |
| .util-pad-btm3\@lg { | |
| padding-bottom: 3rem; | |
| } | |
| .util-pad-vrt3\@lg { | |
| padding-top: 3rem; | |
| padding-bottom: 3rem; | |
| } | |
| .util-pad-hrz3\@lg { | |
| padding-left: 3rem; | |
| padding-right: 3rem; | |
| } | |
| } | |
| @media (min-width: 80rem) { | |
| .util-pad-all3\@xl { | |
| padding: 3rem; | |
| } | |
| .util-pad-top3\@xl { | |
| padding-top: 3rem; | |
| } | |
| .util-pad-lft3\@xl { | |
| padding-left: 3rem; | |
| } | |
| .util-pad-rgt3\@xl { | |
| padding-right: 3rem; | |
| } | |
| .util-pad-btm3\@xl { | |
| padding-bottom: 3rem; | |
| } | |
| .util-pad-vrt3\@xl { | |
| padding-top: 3rem; | |
| padding-bottom: 3rem; | |
| } | |
| .util-pad-hrz3\@xl { | |
| padding-left: 3rem; | |
| padding-right: 3rem; | |
| } | |
| } | |
| @media (min-width: print) { | |
| .util-pad-all3\@print { | |
| padding: 3rem; | |
| } | |
| .util-pad-top3\@print { | |
| padding-top: 3rem; | |
| } | |
| .util-pad-lft3\@print { | |
| padding-left: 3rem; | |
| } | |
| .util-pad-rgt3\@print { | |
| padding-right: 3rem; | |
| } | |
| .util-pad-btm3\@print { | |
| padding-bottom: 3rem; | |
| } | |
| .util-pad-vrt3\@print { | |
| padding-top: 3rem; | |
| padding-bottom: 3rem; | |
| } | |
| .util-pad-hrz3\@print { | |
| padding-left: 3rem; | |
| padding-right: 3rem; | |
| } | |
| } | |
| .util-pad-all4 { | |
| padding: 4rem; | |
| } | |
| .util-pad-top4 { | |
| padding-top: 4rem; | |
| } | |
| .util-pad-lft4 { | |
| padding-left: 4rem; | |
| } | |
| .util-pad-rgt4 { | |
| padding-right: 4rem; | |
| } | |
| .util-pad-btm4 { | |
| padding-bottom: 4rem; | |
| } | |
| .util-pad-vrt4 { | |
| padding-top: 4rem; | |
| padding-bottom: 4rem; | |
| } | |
| .util-pad-hrz4 { | |
| padding-left: 4rem; | |
| padding-right: 4rem; | |
| } | |
| @media (min-width: 30rem) { | |
| .util-pad-all4\@sm { | |
| padding: 4rem; | |
| } | |
| .util-pad-top4\@sm { | |
| padding-top: 4rem; | |
| } | |
| .util-pad-lft4\@sm { | |
| padding-left: 4rem; | |
| } | |
| .util-pad-rgt4\@sm { | |
| padding-right: 4rem; | |
| } | |
| .util-pad-btm4\@sm { | |
| padding-bottom: 4rem; | |
| } | |
| .util-pad-vrt4\@sm { | |
| padding-top: 4rem; | |
| padding-bottom: 4rem; | |
| } | |
| .util-pad-hrz4\@sm { | |
| padding-left: 4rem; | |
| padding-right: 4rem; | |
| } | |
| } | |
| @media (min-width: 40rem) { | |
| .util-pad-all4\@md { | |
| padding: 4rem; | |
| } | |
| .util-pad-top4\@md { | |
| padding-top: 4rem; | |
| } | |
| .util-pad-lft4\@md { | |
| padding-left: 4rem; | |
| } | |
| .util-pad-rgt4\@md { | |
| padding-right: 4rem; | |
| } | |
| .util-pad-btm4\@md { | |
| padding-bottom: 4rem; | |
| } | |
| .util-pad-vrt4\@md { | |
| padding-top: 4rem; | |
| padding-bottom: 4rem; | |
| } | |
| .util-pad-hrz4\@md { | |
| padding-left: 4rem; | |
| padding-right: 4rem; | |
| } | |
| } | |
| @media (min-width: 60rem) { | |
| .util-pad-all4\@lg { | |
| padding: 4rem; | |
| } | |
| .util-pad-top4\@lg { | |
| padding-top: 4rem; | |
| } | |
| .util-pad-lft4\@lg { | |
| padding-left: 4rem; | |
| } | |
| .util-pad-rgt4\@lg { | |
| padding-right: 4rem; | |
| } | |
| .util-pad-btm4\@lg { | |
| padding-bottom: 4rem; | |
| } | |
| .util-pad-vrt4\@lg { | |
| padding-top: 4rem; | |
| padding-bottom: 4rem; | |
| } | |
| .util-pad-hrz4\@lg { | |
| padding-left: 4rem; | |
| padding-right: 4rem; | |
| } | |
| } | |
| @media (min-width: 80rem) { | |
| .util-pad-all4\@xl { | |
| padding: 4rem; | |
| } | |
| .util-pad-top4\@xl { | |
| padding-top: 4rem; | |
| } | |
| .util-pad-lft4\@xl { | |
| padding-left: 4rem; | |
| } | |
| .util-pad-rgt4\@xl { | |
| padding-right: 4rem; | |
| } | |
| .util-pad-btm4\@xl { | |
| padding-bottom: 4rem; | |
| } | |
| .util-pad-vrt4\@xl { | |
| padding-top: 4rem; | |
| padding-bottom: 4rem; | |
| } | |
| .util-pad-hrz4\@xl { | |
| padding-left: 4rem; | |
| padding-right: 4rem; | |
| } | |
| } | |
| @media (min-width: print) { | |
| .util-pad-all4\@print { | |
| padding: 4rem; | |
| } | |
| .util-pad-top4\@print { | |
| padding-top: 4rem; | |
| } | |
| .util-pad-lft4\@print { | |
| padding-left: 4rem; | |
| } | |
| .util-pad-rgt4\@print { | |
| padding-right: 4rem; | |
| } | |
| .util-pad-btm4\@print { | |
| padding-bottom: 4rem; | |
| } | |
| .util-pad-vrt4\@print { | |
| padding-top: 4rem; | |
| padding-bottom: 4rem; | |
| } | |
| .util-pad-hrz4\@print { | |
| padding-left: 4rem; | |
| padding-right: 4rem; | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment