Created
April 30, 2021 11:07
-
-
Save Mokkapps/bebf235650e4cd8759566cc5383046ac 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
| $unit-xxxs: 0.0625em; // 1px | |
| $unit-xxs: 0.125em; // 2px | |
| $unit-xs: 0.25em; // 4px | |
| $unit-s: 0.5em; // 8px | |
| $unit: 1em; // 16px | |
| $unit-l: 1.5em; // 24px | |
| $unit-xl: 2em; // 32px | |
| $space-values: ( | |
| xxxs: $unit-xxxs, | |
| xxs: $unit-xxs, | |
| xs: $unit-xs, | |
| s: $unit-s, | |
| m: $unit, | |
| l: $unit-l, | |
| xl: $unit-xl, | |
| ) !default; | |
| $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; | |
| @mixin make-space($values, $prefixes) { | |
| @each $attr-short, $attr-long in $prefixes { | |
| @each $value-short, $value-em in $values { | |
| .vhv-#{$attr-short}-#{$value-short} { | |
| #{$attr-long}: #{$value-em} !important; | |
| } | |
| } | |
| } | |
| } | |
| @mixin mx($values) { | |
| @each $value-short, $value-em in $values { | |
| .vhv-mx-#{$value-short} { | |
| margin-left: #{$value-em} !important; | |
| margin-right: #{$value-em} !important; | |
| } | |
| } | |
| } | |
| @mixin my($values) { | |
| @each $value-short, $value-em in $values { | |
| .vhv-my-#{$value-short} { | |
| margin-top: #{$value-em} !important; | |
| margin-bottom: #{$value-em} !important; | |
| } | |
| } | |
| } | |
| @mixin px($values) { | |
| @each $value-short, $value-em in $values { | |
| .vhv-px-#{$value-short} { | |
| padding-left: #{$value-em} !important; | |
| padding-right: #{$value-em} !important; | |
| } | |
| } | |
| } | |
| @mixin py($values) { | |
| @each $value-short, $value-em in $values { | |
| .vhv-py-#{$value-short} { | |
| padding-top: #{$value-em} !important; | |
| padding-bottom: #{$value-em} !important; | |
| } | |
| } | |
| } | |
| @include make-space($space-values, $space-prefixes); | |
| @include mx($space-values); | |
| @include my($space-values); | |
| @include px($space-values); | |
| @include py($space-values); |
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
| .vhv-p-xxxs { | |
| padding: 0.0625em !important; | |
| } | |
| .vhv-p-xxs { | |
| padding: 0.125em !important; | |
| } | |
| .vhv-p-xs { | |
| padding: 0.25em !important; | |
| } | |
| .vhv-p-s { | |
| padding: 0.5em !important; | |
| } | |
| .vhv-p-m { | |
| padding: 1em !important; | |
| } | |
| .vhv-p-l { | |
| padding: 1.5em !important; | |
| } | |
| .vhv-p-xl { | |
| padding: 2em !important; | |
| } | |
| .vhv-pt-xxxs { | |
| padding-top: 0.0625em !important; | |
| } | |
| .vhv-pt-xxs { | |
| padding-top: 0.125em !important; | |
| } | |
| .vhv-pt-xs { | |
| padding-top: 0.25em !important; | |
| } | |
| .vhv-pt-s { | |
| padding-top: 0.5em !important; | |
| } | |
| .vhv-pt-m { | |
| padding-top: 1em !important; | |
| } | |
| .vhv-pt-l { | |
| padding-top: 1.5em !important; | |
| } | |
| .vhv-pt-xl { | |
| padding-top: 2em !important; | |
| } | |
| .vhv-pr-xxxs { | |
| padding-right: 0.0625em !important; | |
| } | |
| .vhv-pr-xxs { | |
| padding-right: 0.125em !important; | |
| } | |
| .vhv-pr-xs { | |
| padding-right: 0.25em !important; | |
| } | |
| .vhv-pr-s { | |
| padding-right: 0.5em !important; | |
| } | |
| .vhv-pr-m { | |
| padding-right: 1em !important; | |
| } | |
| .vhv-pr-l { | |
| padding-right: 1.5em !important; | |
| } | |
| .vhv-pr-xl { | |
| padding-right: 2em !important; | |
| } | |
| .vhv-pb-xxxs { | |
| padding-bottom: 0.0625em !important; | |
| } | |
| .vhv-pb-xxs { | |
| padding-bottom: 0.125em !important; | |
| } | |
| .vhv-pb-xs { | |
| padding-bottom: 0.25em !important; | |
| } | |
| .vhv-pb-s { | |
| padding-bottom: 0.5em !important; | |
| } | |
| .vhv-pb-m { | |
| padding-bottom: 1em !important; | |
| } | |
| .vhv-pb-l { | |
| padding-bottom: 1.5em !important; | |
| } | |
| .vhv-pb-xl { | |
| padding-bottom: 2em !important; | |
| } | |
| .vhv-pl-xxxs { | |
| padding-left: 0.0625em !important; | |
| } | |
| .vhv-pl-xxs { | |
| padding-left: 0.125em !important; | |
| } | |
| .vhv-pl-xs { | |
| padding-left: 0.25em !important; | |
| } | |
| .vhv-pl-s { | |
| padding-left: 0.5em !important; | |
| } | |
| .vhv-pl-m { | |
| padding-left: 1em !important; | |
| } | |
| .vhv-pl-l { | |
| padding-left: 1.5em !important; | |
| } | |
| .vhv-pl-xl { | |
| padding-left: 2em !important; | |
| } | |
| .vhv-m-xxxs { | |
| margin: 0.0625em !important; | |
| } | |
| .vhv-m-xxs { | |
| margin: 0.125em !important; | |
| } | |
| .vhv-m-xs { | |
| margin: 0.25em !important; | |
| } | |
| .vhv-m-s { | |
| margin: 0.5em !important; | |
| } | |
| .vhv-m-m { | |
| margin: 1em !important; | |
| } | |
| .vhv-m-l { | |
| margin: 1.5em !important; | |
| } | |
| .vhv-m-xl { | |
| margin: 2em !important; | |
| } | |
| .vhv-mt-xxxs { | |
| margin-top: 0.0625em !important; | |
| } | |
| .vhv-mt-xxs { | |
| margin-top: 0.125em !important; | |
| } | |
| .vhv-mt-xs { | |
| margin-top: 0.25em !important; | |
| } | |
| .vhv-mt-s { | |
| margin-top: 0.5em !important; | |
| } | |
| .vhv-mt-m { | |
| margin-top: 1em !important; | |
| } | |
| .vhv-mt-l { | |
| margin-top: 1.5em !important; | |
| } | |
| .vhv-mt-xl { | |
| margin-top: 2em !important; | |
| } | |
| .vhv-mr-xxxs { | |
| margin-right: 0.0625em !important; | |
| } | |
| .vhv-mr-xxs { | |
| margin-right: 0.125em !important; | |
| } | |
| .vhv-mr-xs { | |
| margin-right: 0.25em !important; | |
| } | |
| .vhv-mr-s { | |
| margin-right: 0.5em !important; | |
| } | |
| .vhv-mr-m { | |
| margin-right: 1em !important; | |
| } | |
| .vhv-mr-l { | |
| margin-right: 1.5em !important; | |
| } | |
| .vhv-mr-xl { | |
| margin-right: 2em !important; | |
| } | |
| .vhv-mb-xxxs { | |
| margin-bottom: 0.0625em !important; | |
| } | |
| .vhv-mb-xxs { | |
| margin-bottom: 0.125em !important; | |
| } | |
| .vhv-mb-xs { | |
| margin-bottom: 0.25em !important; | |
| } | |
| .vhv-mb-s { | |
| margin-bottom: 0.5em !important; | |
| } | |
| .vhv-mb-m { | |
| margin-bottom: 1em !important; | |
| } | |
| .vhv-mb-l { | |
| margin-bottom: 1.5em !important; | |
| } | |
| .vhv-mb-xl { | |
| margin-bottom: 2em !important; | |
| } | |
| .vhv-ml-xxxs { | |
| margin-left: 0.0625em !important; | |
| } | |
| .vhv-ml-xxs { | |
| margin-left: 0.125em !important; | |
| } | |
| .vhv-ml-xs { | |
| margin-left: 0.25em !important; | |
| } | |
| .vhv-ml-s { | |
| margin-left: 0.5em !important; | |
| } | |
| .vhv-ml-m { | |
| margin-left: 1em !important; | |
| } | |
| .vhv-ml-l { | |
| margin-left: 1.5em !important; | |
| } | |
| .vhv-ml-xl { | |
| margin-left: 2em !important; | |
| } | |
| .vhv-mx-xxxs { | |
| margin-left: 0.0625em !important; | |
| margin-right: 0.0625em !important; | |
| } | |
| .vhv-mx-xxs { | |
| margin-left: 0.125em !important; | |
| margin-right: 0.125em !important; | |
| } | |
| .vhv-mx-xs { | |
| margin-left: 0.25em !important; | |
| margin-right: 0.25em !important; | |
| } | |
| .vhv-mx-s { | |
| margin-left: 0.5em !important; | |
| margin-right: 0.5em !important; | |
| } | |
| .vhv-mx-m { | |
| margin-left: 1em !important; | |
| margin-right: 1em !important; | |
| } | |
| .vhv-mx-l { | |
| margin-left: 1.5em !important; | |
| margin-right: 1.5em !important; | |
| } | |
| .vhv-mx-xl { | |
| margin-left: 2em !important; | |
| margin-right: 2em !important; | |
| } | |
| .vhv-my-xxxs { | |
| margin-top: 0.0625em !important; | |
| margin-bottom: 0.0625em !important; | |
| } | |
| .vhv-my-xxs { | |
| margin-top: 0.125em !important; | |
| margin-bottom: 0.125em !important; | |
| } | |
| .vhv-my-xs { | |
| margin-top: 0.25em !important; | |
| margin-bottom: 0.25em !important; | |
| } | |
| .vhv-my-s { | |
| margin-top: 0.5em !important; | |
| margin-bottom: 0.5em !important; | |
| } | |
| .vhv-my-m { | |
| margin-top: 1em !important; | |
| margin-bottom: 1em !important; | |
| } | |
| .vhv-my-l { | |
| margin-top: 1.5em !important; | |
| margin-bottom: 1.5em !important; | |
| } | |
| .vhv-my-xl { | |
| margin-top: 2em !important; | |
| margin-bottom: 2em !important; | |
| } | |
| .vhv-px-xxxs { | |
| padding-left: 0.0625em !important; | |
| padding-right: 0.0625em !important; | |
| } | |
| .vhv-px-xxs { | |
| padding-left: 0.125em !important; | |
| padding-right: 0.125em !important; | |
| } | |
| .vhv-px-xs { | |
| padding-left: 0.25em !important; | |
| padding-right: 0.25em !important; | |
| } | |
| .vhv-px-s { | |
| padding-left: 0.5em !important; | |
| padding-right: 0.5em !important; | |
| } | |
| .vhv-px-m { | |
| padding-left: 1em !important; | |
| padding-right: 1em !important; | |
| } | |
| .vhv-px-l { | |
| padding-left: 1.5em !important; | |
| padding-right: 1.5em !important; | |
| } | |
| .vhv-px-xl { | |
| padding-left: 2em !important; | |
| padding-right: 2em !important; | |
| } | |
| .vhv-py-xxxs { | |
| padding-top: 0.0625em !important; | |
| padding-bottom: 0.0625em !important; | |
| } | |
| .vhv-py-xxs { | |
| padding-top: 0.125em !important; | |
| padding-bottom: 0.125em !important; | |
| } | |
| .vhv-py-xs { | |
| padding-top: 0.25em !important; | |
| padding-bottom: 0.25em !important; | |
| } | |
| .vhv-py-s { | |
| padding-top: 0.5em !important; | |
| padding-bottom: 0.5em !important; | |
| } | |
| .vhv-py-m { | |
| padding-top: 1em !important; | |
| padding-bottom: 1em !important; | |
| } | |
| .vhv-py-l { | |
| padding-top: 1.5em !important; | |
| padding-bottom: 1.5em !important; | |
| } | |
| .vhv-py-xl { | |
| padding-top: 2em !important; | |
| padding-bottom: 2em !important; | |
| } |
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