Created
December 10, 2020 08:48
-
-
Save ehellman/8657757a01ecbe516d6df056e9023b69 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
| $spacing-mobile-tiny: 0.8rem; | |
| $spacing-mobile-xsmall: 1.6rem; | |
| $spacing-mobile-small: 2rem; | |
| $spacing-mobile-medium: 2.4rem; | |
| $spacing-mobile-large: 3.2rem; | |
| $spacing-mobile-xlarge: 4rem; | |
| $spacing-desktop-tiny: 1.6rem; | |
| $spacing-mobile-xsmall: 2rem; | |
| $spacing-desktop-small: 2.4rem; | |
| $spacing-desktop-medium: 3.2rem; | |
| $spacing-desktop-large: 4rem; | |
| $spacing-desktop-xlarge: 4.8rem; | |
| $tablet: 768px; | |
| @mixin property-value-auto($property) { | |
| #{$property}: auto; | |
| @media screen and (min-width: $tablet) { | |
| #{$property}: auto; | |
| } | |
| } | |
| @mixin spacing-base--modifiers($property) { | |
| @if $property == 'margin-right' { | |
| @include property-value-auto($property); | |
| } @else if $property == 'margin-left' { | |
| @include property-value-auto($property); | |
| } | |
| &m--mini, &--mini { | |
| // keeps 0.8rem margins | |
| @each $p in $property { | |
| #{$p}: $spacing-mobile-tiny; | |
| } | |
| } | |
| &m--tiny, &--tiny { | |
| @each $p in $property { | |
| #{$p}: $spacing-mobile-tiny; | |
| } | |
| } | |
| &m--small, &--small { | |
| @each $p in $property { | |
| #{$p}: $spacing-mobile-small; | |
| } | |
| } | |
| &m--medium, &--medium { | |
| @each $p in $property { | |
| #{$p}: $spacing-mobile-medium; | |
| } | |
| } | |
| &m--large, &--large { | |
| @each $p in $property { | |
| #{$p}: $spacing-mobile-large; | |
| } | |
| } | |
| &m--xlarge, &--xlarge { | |
| @each $p in $property { | |
| #{$p}: $spacing-mobile-xlarge; | |
| } | |
| } | |
| @media screen and (min-width: $tablet) { | |
| &d--tiny, &--tiny { | |
| @each $p in $property { | |
| #{$p}: $spacing-desktop-tiny; | |
| } | |
| } | |
| &d--small, &--small { | |
| @each $p in $property { | |
| #{$p}: $spacing-desktop-small; | |
| } | |
| } | |
| &d--medium, &--medium { | |
| @each $p in $property { | |
| #{$p}: $spacing-desktop-medium; | |
| } | |
| } | |
| &d--large, &--large { | |
| @each $p in $property { | |
| #{$p}: $spacing-desktop-large; | |
| } | |
| } | |
| &d--xlarge, &--xlarge { | |
| @each $p in $property { | |
| #{$p}: $spacing-desktop-xlarge; | |
| } | |
| } | |
| } | |
| } | |
| @mixin spacing-base($letter-prefix, $property) { | |
| .#{$letter-prefix} { | |
| @include spacing-base--modifiers($property); | |
| } | |
| } | |
| $margin-x: 'margin-left', 'margin-right'; | |
| $margin-y: 'margin-top', 'margin-bottom'; | |
| $padding-x: 'padding-left', 'padding-right'; | |
| $padding-y: 'padding-top', 'padding-bottom'; | |
| @include spacing-base('s', 'margin'); // sm && sd | |
| @include spacing-base('st', 'margin-top'); // stm && std | |
| @include spacing-base('sr', 'margin-right'); // srm && srd | |
| @include spacing-base('sb', 'margin-bottom'); // sbm && sbd | |
| @include spacing-base('sl', 'margin-left'); // slm && sld | |
| @include spacing-base('sx', $margin-x); // sxm && sxd | |
| @include spacing-base('sy', $margin-y); // sym && syd | |
| // creates classes for padding | |
| @include spacing-base('p', 'padding'); // pm & pd | |
| @include spacing-base('pt', 'padding-top'); // ptm & ptd | |
| @include spacing-base('pr', 'padding-right'); // prm && prd | |
| @include spacing-base('pb', 'padding-bottom'); // pbm && pbd | |
| @include spacing-base('pl', 'padding-left'); // plm && pld | |
| @include spacing-base('px', $padding-x); // pxm && pxd | |
| @include spacing-base('py', $padding-y); // pym && pyd |
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
| .sm--mini, .s--mini { | |
| margin: 0.8rem; | |
| } | |
| .sm--tiny, .s--tiny { | |
| margin: 0.8rem; | |
| } | |
| .sm--small, .s--small { | |
| margin: 2rem; | |
| } | |
| .sm--medium, .s--medium { | |
| margin: 2.4rem; | |
| } | |
| .sm--large, .s--large { | |
| margin: 3.2rem; | |
| } | |
| .sm--xlarge, .s--xlarge { | |
| margin: 4rem; | |
| } | |
| @media screen and (min-width: 768px) { | |
| .sd--tiny, .s--tiny { | |
| margin: 1.6rem; | |
| } | |
| .sd--small, .s--small { | |
| margin: 2.4rem; | |
| } | |
| .sd--medium, .s--medium { | |
| margin: 3.2rem; | |
| } | |
| .sd--large, .s--large { | |
| margin: 4rem; | |
| } | |
| .sd--xlarge, .s--xlarge { | |
| margin: 4.8rem; | |
| } | |
| } | |
| .stm--mini, .st--mini { | |
| margin-top: 0.8rem; | |
| } | |
| .stm--tiny, .st--tiny { | |
| margin-top: 0.8rem; | |
| } | |
| .stm--small, .st--small { | |
| margin-top: 2rem; | |
| } | |
| .stm--medium, .st--medium { | |
| margin-top: 2.4rem; | |
| } | |
| .stm--large, .st--large { | |
| margin-top: 3.2rem; | |
| } | |
| .stm--xlarge, .st--xlarge { | |
| margin-top: 4rem; | |
| } | |
| @media screen and (min-width: 768px) { | |
| .std--tiny, .st--tiny { | |
| margin-top: 1.6rem; | |
| } | |
| .std--small, .st--small { | |
| margin-top: 2.4rem; | |
| } | |
| .std--medium, .st--medium { | |
| margin-top: 3.2rem; | |
| } | |
| .std--large, .st--large { | |
| margin-top: 4rem; | |
| } | |
| .std--xlarge, .st--xlarge { | |
| margin-top: 4.8rem; | |
| } | |
| } | |
| .sr { | |
| margin-right: auto; | |
| } | |
| @media screen and (min-width: 768px) { | |
| .sr { | |
| margin-right: auto; | |
| } | |
| } | |
| .srm--mini, .sr--mini { | |
| margin-right: 0.8rem; | |
| } | |
| .srm--tiny, .sr--tiny { | |
| margin-right: 0.8rem; | |
| } | |
| .srm--small, .sr--small { | |
| margin-right: 2rem; | |
| } | |
| .srm--medium, .sr--medium { | |
| margin-right: 2.4rem; | |
| } | |
| .srm--large, .sr--large { | |
| margin-right: 3.2rem; | |
| } | |
| .srm--xlarge, .sr--xlarge { | |
| margin-right: 4rem; | |
| } | |
| @media screen and (min-width: 768px) { | |
| .srd--tiny, .sr--tiny { | |
| margin-right: 1.6rem; | |
| } | |
| .srd--small, .sr--small { | |
| margin-right: 2.4rem; | |
| } | |
| .srd--medium, .sr--medium { | |
| margin-right: 3.2rem; | |
| } | |
| .srd--large, .sr--large { | |
| margin-right: 4rem; | |
| } | |
| .srd--xlarge, .sr--xlarge { | |
| margin-right: 4.8rem; | |
| } | |
| } | |
| .sbm--mini, .sb--mini { | |
| margin-bottom: 0.8rem; | |
| } | |
| .sbm--tiny, .sb--tiny { | |
| margin-bottom: 0.8rem; | |
| } | |
| .sbm--small, .sb--small { | |
| margin-bottom: 2rem; | |
| } | |
| .sbm--medium, .sb--medium { | |
| margin-bottom: 2.4rem; | |
| } | |
| .sbm--large, .sb--large { | |
| margin-bottom: 3.2rem; | |
| } | |
| .sbm--xlarge, .sb--xlarge { | |
| margin-bottom: 4rem; | |
| } | |
| @media screen and (min-width: 768px) { | |
| .sbd--tiny, .sb--tiny { | |
| margin-bottom: 1.6rem; | |
| } | |
| .sbd--small, .sb--small { | |
| margin-bottom: 2.4rem; | |
| } | |
| .sbd--medium, .sb--medium { | |
| margin-bottom: 3.2rem; | |
| } | |
| .sbd--large, .sb--large { | |
| margin-bottom: 4rem; | |
| } | |
| .sbd--xlarge, .sb--xlarge { | |
| margin-bottom: 4.8rem; | |
| } | |
| } | |
| .sl { | |
| margin-left: auto; | |
| } | |
| @media screen and (min-width: 768px) { | |
| .sl { | |
| margin-left: auto; | |
| } | |
| } | |
| .slm--mini, .sl--mini { | |
| margin-left: 0.8rem; | |
| } | |
| .slm--tiny, .sl--tiny { | |
| margin-left: 0.8rem; | |
| } | |
| .slm--small, .sl--small { | |
| margin-left: 2rem; | |
| } | |
| .slm--medium, .sl--medium { | |
| margin-left: 2.4rem; | |
| } | |
| .slm--large, .sl--large { | |
| margin-left: 3.2rem; | |
| } | |
| .slm--xlarge, .sl--xlarge { | |
| margin-left: 4rem; | |
| } | |
| @media screen and (min-width: 768px) { | |
| .sld--tiny, .sl--tiny { | |
| margin-left: 1.6rem; | |
| } | |
| .sld--small, .sl--small { | |
| margin-left: 2.4rem; | |
| } | |
| .sld--medium, .sl--medium { | |
| margin-left: 3.2rem; | |
| } | |
| .sld--large, .sl--large { | |
| margin-left: 4rem; | |
| } | |
| .sld--xlarge, .sl--xlarge { | |
| margin-left: 4.8rem; | |
| } | |
| } | |
| .sxm--mini, .sx--mini { | |
| margin-left: 0.8rem; | |
| margin-right: 0.8rem; | |
| } | |
| .sxm--tiny, .sx--tiny { | |
| margin-left: 0.8rem; | |
| margin-right: 0.8rem; | |
| } | |
| .sxm--small, .sx--small { | |
| margin-left: 2rem; | |
| margin-right: 2rem; | |
| } | |
| .sxm--medium, .sx--medium { | |
| margin-left: 2.4rem; | |
| margin-right: 2.4rem; | |
| } | |
| .sxm--large, .sx--large { | |
| margin-left: 3.2rem; | |
| margin-right: 3.2rem; | |
| } | |
| .sxm--xlarge, .sx--xlarge { | |
| margin-left: 4rem; | |
| margin-right: 4rem; | |
| } | |
| @media screen and (min-width: 768px) { | |
| .sxd--tiny, .sx--tiny { | |
| margin-left: 1.6rem; | |
| margin-right: 1.6rem; | |
| } | |
| .sxd--small, .sx--small { | |
| margin-left: 2.4rem; | |
| margin-right: 2.4rem; | |
| } | |
| .sxd--medium, .sx--medium { | |
| margin-left: 3.2rem; | |
| margin-right: 3.2rem; | |
| } | |
| .sxd--large, .sx--large { | |
| margin-left: 4rem; | |
| margin-right: 4rem; | |
| } | |
| .sxd--xlarge, .sx--xlarge { | |
| margin-left: 4.8rem; | |
| margin-right: 4.8rem; | |
| } | |
| } | |
| .sym--mini, .sy--mini { | |
| margin-top: 0.8rem; | |
| margin-bottom: 0.8rem; | |
| } | |
| .sym--tiny, .sy--tiny { | |
| margin-top: 0.8rem; | |
| margin-bottom: 0.8rem; | |
| } | |
| .sym--small, .sy--small { | |
| margin-top: 2rem; | |
| margin-bottom: 2rem; | |
| } | |
| .sym--medium, .sy--medium { | |
| margin-top: 2.4rem; | |
| margin-bottom: 2.4rem; | |
| } | |
| .sym--large, .sy--large { | |
| margin-top: 3.2rem; | |
| margin-bottom: 3.2rem; | |
| } | |
| .sym--xlarge, .sy--xlarge { | |
| margin-top: 4rem; | |
| margin-bottom: 4rem; | |
| } | |
| @media screen and (min-width: 768px) { | |
| .syd--tiny, .sy--tiny { | |
| margin-top: 1.6rem; | |
| margin-bottom: 1.6rem; | |
| } | |
| .syd--small, .sy--small { | |
| margin-top: 2.4rem; | |
| margin-bottom: 2.4rem; | |
| } | |
| .syd--medium, .sy--medium { | |
| margin-top: 3.2rem; | |
| margin-bottom: 3.2rem; | |
| } | |
| .syd--large, .sy--large { | |
| margin-top: 4rem; | |
| margin-bottom: 4rem; | |
| } | |
| .syd--xlarge, .sy--xlarge { | |
| margin-top: 4.8rem; | |
| margin-bottom: 4.8rem; | |
| } | |
| } | |
| .pm--mini, .p--mini { | |
| padding: 0.8rem; | |
| } | |
| .pm--tiny, .p--tiny { | |
| padding: 0.8rem; | |
| } | |
| .pm--small, .p--small { | |
| padding: 2rem; | |
| } | |
| .pm--medium, .p--medium { | |
| padding: 2.4rem; | |
| } | |
| .pm--large, .p--large { | |
| padding: 3.2rem; | |
| } | |
| .pm--xlarge, .p--xlarge { | |
| padding: 4rem; | |
| } | |
| @media screen and (min-width: 768px) { | |
| .pd--tiny, .p--tiny { | |
| padding: 1.6rem; | |
| } | |
| .pd--small, .p--small { | |
| padding: 2.4rem; | |
| } | |
| .pd--medium, .p--medium { | |
| padding: 3.2rem; | |
| } | |
| .pd--large, .p--large { | |
| padding: 4rem; | |
| } | |
| .pd--xlarge, .p--xlarge { | |
| padding: 4.8rem; | |
| } | |
| } | |
| .ptm--mini, .pt--mini { | |
| padding-top: 0.8rem; | |
| } | |
| .ptm--tiny, .pt--tiny { | |
| padding-top: 0.8rem; | |
| } | |
| .ptm--small, .pt--small { | |
| padding-top: 2rem; | |
| } | |
| .ptm--medium, .pt--medium { | |
| padding-top: 2.4rem; | |
| } | |
| .ptm--large, .pt--large { | |
| padding-top: 3.2rem; | |
| } | |
| .ptm--xlarge, .pt--xlarge { | |
| padding-top: 4rem; | |
| } | |
| @media screen and (min-width: 768px) { | |
| .ptd--tiny, .pt--tiny { | |
| padding-top: 1.6rem; | |
| } | |
| .ptd--small, .pt--small { | |
| padding-top: 2.4rem; | |
| } | |
| .ptd--medium, .pt--medium { | |
| padding-top: 3.2rem; | |
| } | |
| .ptd--large, .pt--large { | |
| padding-top: 4rem; | |
| } | |
| .ptd--xlarge, .pt--xlarge { | |
| padding-top: 4.8rem; | |
| } | |
| } | |
| .prm--mini, .pr--mini { | |
| padding-right: 0.8rem; | |
| } | |
| .prm--tiny, .pr--tiny { | |
| padding-right: 0.8rem; | |
| } | |
| .prm--small, .pr--small { | |
| padding-right: 2rem; | |
| } | |
| .prm--medium, .pr--medium { | |
| padding-right: 2.4rem; | |
| } | |
| .prm--large, .pr--large { | |
| padding-right: 3.2rem; | |
| } | |
| .prm--xlarge, .pr--xlarge { | |
| padding-right: 4rem; | |
| } | |
| @media screen and (min-width: 768px) { | |
| .prd--tiny, .pr--tiny { | |
| padding-right: 1.6rem; | |
| } | |
| .prd--small, .pr--small { | |
| padding-right: 2.4rem; | |
| } | |
| .prd--medium, .pr--medium { | |
| padding-right: 3.2rem; | |
| } | |
| .prd--large, .pr--large { | |
| padding-right: 4rem; | |
| } | |
| .prd--xlarge, .pr--xlarge { | |
| padding-right: 4.8rem; | |
| } | |
| } | |
| .pbm--mini, .pb--mini { | |
| padding-bottom: 0.8rem; | |
| } | |
| .pbm--tiny, .pb--tiny { | |
| padding-bottom: 0.8rem; | |
| } | |
| .pbm--small, .pb--small { | |
| padding-bottom: 2rem; | |
| } | |
| .pbm--medium, .pb--medium { | |
| padding-bottom: 2.4rem; | |
| } | |
| .pbm--large, .pb--large { | |
| padding-bottom: 3.2rem; | |
| } | |
| .pbm--xlarge, .pb--xlarge { | |
| padding-bottom: 4rem; | |
| } | |
| @media screen and (min-width: 768px) { | |
| .pbd--tiny, .pb--tiny { | |
| padding-bottom: 1.6rem; | |
| } | |
| .pbd--small, .pb--small { | |
| padding-bottom: 2.4rem; | |
| } | |
| .pbd--medium, .pb--medium { | |
| padding-bottom: 3.2rem; | |
| } | |
| .pbd--large, .pb--large { | |
| padding-bottom: 4rem; | |
| } | |
| .pbd--xlarge, .pb--xlarge { | |
| padding-bottom: 4.8rem; | |
| } | |
| } | |
| .plm--mini, .pl--mini { | |
| padding-left: 0.8rem; | |
| } | |
| .plm--tiny, .pl--tiny { | |
| padding-left: 0.8rem; | |
| } | |
| .plm--small, .pl--small { | |
| padding-left: 2rem; | |
| } | |
| .plm--medium, .pl--medium { | |
| padding-left: 2.4rem; | |
| } | |
| .plm--large, .pl--large { | |
| padding-left: 3.2rem; | |
| } | |
| .plm--xlarge, .pl--xlarge { | |
| padding-left: 4rem; | |
| } | |
| @media screen and (min-width: 768px) { | |
| .pld--tiny, .pl--tiny { | |
| padding-left: 1.6rem; | |
| } | |
| .pld--small, .pl--small { | |
| padding-left: 2.4rem; | |
| } | |
| .pld--medium, .pl--medium { | |
| padding-left: 3.2rem; | |
| } | |
| .pld--large, .pl--large { | |
| padding-left: 4rem; | |
| } | |
| .pld--xlarge, .pl--xlarge { | |
| padding-left: 4.8rem; | |
| } | |
| } | |
| .pxm--mini, .px--mini { | |
| padding-left: 0.8rem; | |
| padding-right: 0.8rem; | |
| } | |
| .pxm--tiny, .px--tiny { | |
| padding-left: 0.8rem; | |
| padding-right: 0.8rem; | |
| } | |
| .pxm--small, .px--small { | |
| padding-left: 2rem; | |
| padding-right: 2rem; | |
| } | |
| .pxm--medium, .px--medium { | |
| padding-left: 2.4rem; | |
| padding-right: 2.4rem; | |
| } | |
| .pxm--large, .px--large { | |
| padding-left: 3.2rem; | |
| padding-right: 3.2rem; | |
| } | |
| .pxm--xlarge, .px--xlarge { | |
| padding-left: 4rem; | |
| padding-right: 4rem; | |
| } | |
| @media screen and (min-width: 768px) { | |
| .pxd--tiny, .px--tiny { | |
| padding-left: 1.6rem; | |
| padding-right: 1.6rem; | |
| } | |
| .pxd--small, .px--small { | |
| padding-left: 2.4rem; | |
| padding-right: 2.4rem; | |
| } | |
| .pxd--medium, .px--medium { | |
| padding-left: 3.2rem; | |
| padding-right: 3.2rem; | |
| } | |
| .pxd--large, .px--large { | |
| padding-left: 4rem; | |
| padding-right: 4rem; | |
| } | |
| .pxd--xlarge, .px--xlarge { | |
| padding-left: 4.8rem; | |
| padding-right: 4.8rem; | |
| } | |
| } | |
| .pym--mini, .py--mini { | |
| padding-top: 0.8rem; | |
| padding-bottom: 0.8rem; | |
| } | |
| .pym--tiny, .py--tiny { | |
| padding-top: 0.8rem; | |
| padding-bottom: 0.8rem; | |
| } | |
| .pym--small, .py--small { | |
| padding-top: 2rem; | |
| padding-bottom: 2rem; | |
| } | |
| .pym--medium, .py--medium { | |
| padding-top: 2.4rem; | |
| padding-bottom: 2.4rem; | |
| } | |
| .pym--large, .py--large { | |
| padding-top: 3.2rem; | |
| padding-bottom: 3.2rem; | |
| } | |
| .pym--xlarge, .py--xlarge { | |
| padding-top: 4rem; | |
| padding-bottom: 4rem; | |
| } | |
| @media screen and (min-width: 768px) { | |
| .pyd--tiny, .py--tiny { | |
| padding-top: 1.6rem; | |
| padding-bottom: 1.6rem; | |
| } | |
| .pyd--small, .py--small { | |
| padding-top: 2.4rem; | |
| padding-bottom: 2.4rem; | |
| } | |
| .pyd--medium, .py--medium { | |
| padding-top: 3.2rem; | |
| padding-bottom: 3.2rem; | |
| } | |
| .pyd--large, .py--large { | |
| padding-top: 4rem; | |
| padding-bottom: 4rem; | |
| } | |
| .pyd--xlarge, .py--xlarge { | |
| padding-top: 4.8rem; | |
| padding-bottom: 4.8rem; | |
| } | |
| } |
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": { | |
| "compiler": "dart-sass/1.26.11", | |
| "extensions": {}, | |
| "syntax": "SCSS", | |
| "outputStyle": "expanded" | |
| }, | |
| "autoprefixer": false | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment