Created
March 1, 2021 09:04
-
-
Save KennethMurugu/b189f72fe8e004259140f268ed454d47 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
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
$spacing-sizes: ( | |
0: 0rem, | |
1: 0.25rem, | |
2: 0.5rem, | |
3: 0.75rem, | |
4: 1rem, | |
5: 1.25rem, | |
6: 1.5rem, | |
7: 1.75rem, | |
8: 2rem, | |
9: 2.25rem, | |
10: 2.5rem, | |
11: 2.75rem, | |
12: 3rem, | |
'auto': auto, | |
); | |
// Margins | |
@mixin ml-($size: 0) { | |
// $m: map-get($spacing-sizes, $size); | |
// @debug 'margin-left=#{$m}, size=#{$size}'; | |
margin-left: map-get($spacing-sizes, $size) !important; | |
} | |
@mixin mr-($size: 0) { | |
margin-right: map-get($spacing-sizes, $size) !important; | |
} | |
@mixin mt-($size: 0) { | |
margin-top: map-get($spacing-sizes, $size) !important; | |
} | |
@mixin mb-($size: 0) { | |
margin-bottom: map-get($spacing-sizes, $size) !important; | |
} | |
@mixin mx-($size: 0) { | |
@include ml-($size); | |
@include mr-($size); | |
} | |
@mixin my-($size: 0) { | |
@include mt-($size); | |
@include mb-($size); | |
} | |
// Paddings | |
@mixin pl-($size: 0) { | |
padding-left: map-get($spacing-sizes, $size) !important; | |
} | |
@mixin pr-($size: 0) { | |
padding-right: map-get($spacing-sizes, $size) !important; | |
} | |
@mixin pt-($size: 0) { | |
padding-top: map-get($spacing-sizes, $size) !important; | |
} | |
@mixin pb-($size: 0) { | |
padding-bottom: map-get($spacing-sizes, $size) !important; | |
} | |
@mixin px-($size: 0) { | |
@include pl-($size); | |
@include pr-($size); | |
} | |
@mixin py-($size: 0) { | |
@include pt-($size); | |
@include pb-($size); | |
} | |
// Generate classes for each of the | |
@each $key, $size in $spacing-sizes { | |
// @debug $key, $size; | |
// Margins | |
.ma-#{$key} { | |
@include mx-($key); | |
@include my-($key); | |
} | |
.mx-#{$key} { | |
@include mx-($key); | |
} | |
.my-#{$key} { | |
@include my-($key); | |
} | |
.ml-#{$key} { | |
@include ml-($key); | |
} | |
.mr-#{$key} { | |
@include mr-($key); | |
} | |
.mt-#{$key} { | |
@include mt-($key); | |
} | |
.mb-#{$key} { | |
@include mb-($key); | |
} | |
// Padding | |
//Padding does not have the `auto` property so skip it | |
@if $key != auto { | |
.pa-#{$key} { | |
@include px-($key); | |
@include py-($key); | |
} | |
.px-#{$key} { | |
@include px-($key); | |
} | |
.py-#{$key} { | |
@include py-($key); | |
} | |
.pl-#{$key} { | |
@include pl-($key); | |
} | |
.pr-#{$key} { | |
@include pr-($key); | |
} | |
.pt-#{$key} { | |
@include pt-($key); | |
} | |
.pb-#{$key} { | |
@include pb-($key); | |
} | |
} | |
} |
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
.ma-0 { | |
margin-left: 0rem !important; | |
margin-right: 0rem !important; | |
margin-top: 0rem !important; | |
margin-bottom: 0rem !important; | |
} | |
.mx-0 { | |
margin-left: 0rem !important; | |
margin-right: 0rem !important; | |
} | |
.my-0 { | |
margin-top: 0rem !important; | |
margin-bottom: 0rem !important; | |
} | |
.ml-0 { | |
margin-left: 0rem !important; | |
} | |
.mr-0 { | |
margin-right: 0rem !important; | |
} | |
.mt-0 { | |
margin-top: 0rem !important; | |
} | |
.mb-0 { | |
margin-bottom: 0rem !important; | |
} | |
.pa-0 { | |
padding-left: 0rem !important; | |
padding-right: 0rem !important; | |
padding-top: 0rem !important; | |
padding-bottom: 0rem !important; | |
} | |
.px-0 { | |
padding-left: 0rem !important; | |
padding-right: 0rem !important; | |
} | |
.py-0 { | |
padding-top: 0rem !important; | |
padding-bottom: 0rem !important; | |
} | |
.pl-0 { | |
padding-left: 0rem !important; | |
} | |
.pr-0 { | |
padding-right: 0rem !important; | |
} | |
.pt-0 { | |
padding-top: 0rem !important; | |
} | |
.pb-0 { | |
padding-bottom: 0rem !important; | |
} | |
.ma-1 { | |
margin-left: 0.25rem !important; | |
margin-right: 0.25rem !important; | |
margin-top: 0.25rem !important; | |
margin-bottom: 0.25rem !important; | |
} | |
.mx-1 { | |
margin-left: 0.25rem !important; | |
margin-right: 0.25rem !important; | |
} | |
.my-1 { | |
margin-top: 0.25rem !important; | |
margin-bottom: 0.25rem !important; | |
} | |
.ml-1 { | |
margin-left: 0.25rem !important; | |
} | |
.mr-1 { | |
margin-right: 0.25rem !important; | |
} | |
.mt-1 { | |
margin-top: 0.25rem !important; | |
} | |
.mb-1 { | |
margin-bottom: 0.25rem !important; | |
} | |
.pa-1 { | |
padding-left: 0.25rem !important; | |
padding-right: 0.25rem !important; | |
padding-top: 0.25rem !important; | |
padding-bottom: 0.25rem !important; | |
} | |
.px-1 { | |
padding-left: 0.25rem !important; | |
padding-right: 0.25rem !important; | |
} | |
.py-1 { | |
padding-top: 0.25rem !important; | |
padding-bottom: 0.25rem !important; | |
} | |
.pl-1 { | |
padding-left: 0.25rem !important; | |
} | |
.pr-1 { | |
padding-right: 0.25rem !important; | |
} | |
.pt-1 { | |
padding-top: 0.25rem !important; | |
} | |
.pb-1 { | |
padding-bottom: 0.25rem !important; | |
} | |
.ma-2 { | |
margin-left: 0.5rem !important; | |
margin-right: 0.5rem !important; | |
margin-top: 0.5rem !important; | |
margin-bottom: 0.5rem !important; | |
} | |
.mx-2 { | |
margin-left: 0.5rem !important; | |
margin-right: 0.5rem !important; | |
} | |
.my-2 { | |
margin-top: 0.5rem !important; | |
margin-bottom: 0.5rem !important; | |
} | |
.ml-2 { | |
margin-left: 0.5rem !important; | |
} | |
.mr-2 { | |
margin-right: 0.5rem !important; | |
} | |
.mt-2 { | |
margin-top: 0.5rem !important; | |
} | |
.mb-2 { | |
margin-bottom: 0.5rem !important; | |
} | |
.pa-2 { | |
padding-left: 0.5rem !important; | |
padding-right: 0.5rem !important; | |
padding-top: 0.5rem !important; | |
padding-bottom: 0.5rem !important; | |
} | |
.px-2 { | |
padding-left: 0.5rem !important; | |
padding-right: 0.5rem !important; | |
} | |
.py-2 { | |
padding-top: 0.5rem !important; | |
padding-bottom: 0.5rem !important; | |
} | |
.pl-2 { | |
padding-left: 0.5rem !important; | |
} | |
.pr-2 { | |
padding-right: 0.5rem !important; | |
} | |
.pt-2 { | |
padding-top: 0.5rem !important; | |
} | |
.pb-2 { | |
padding-bottom: 0.5rem !important; | |
} | |
.ma-3 { | |
margin-left: 0.75rem !important; | |
margin-right: 0.75rem !important; | |
margin-top: 0.75rem !important; | |
margin-bottom: 0.75rem !important; | |
} | |
.mx-3 { | |
margin-left: 0.75rem !important; | |
margin-right: 0.75rem !important; | |
} | |
.my-3 { | |
margin-top: 0.75rem !important; | |
margin-bottom: 0.75rem !important; | |
} | |
.ml-3 { | |
margin-left: 0.75rem !important; | |
} | |
.mr-3 { | |
margin-right: 0.75rem !important; | |
} | |
.mt-3 { | |
margin-top: 0.75rem !important; | |
} | |
.mb-3 { | |
margin-bottom: 0.75rem !important; | |
} | |
.pa-3 { | |
padding-left: 0.75rem !important; | |
padding-right: 0.75rem !important; | |
padding-top: 0.75rem !important; | |
padding-bottom: 0.75rem !important; | |
} | |
.px-3 { | |
padding-left: 0.75rem !important; | |
padding-right: 0.75rem !important; | |
} | |
.py-3 { | |
padding-top: 0.75rem !important; | |
padding-bottom: 0.75rem !important; | |
} | |
.pl-3 { | |
padding-left: 0.75rem !important; | |
} | |
.pr-3 { | |
padding-right: 0.75rem !important; | |
} | |
.pt-3 { | |
padding-top: 0.75rem !important; | |
} | |
.pb-3 { | |
padding-bottom: 0.75rem !important; | |
} | |
.ma-4 { | |
margin-left: 1rem !important; | |
margin-right: 1rem !important; | |
margin-top: 1rem !important; | |
margin-bottom: 1rem !important; | |
} | |
.mx-4 { | |
margin-left: 1rem !important; | |
margin-right: 1rem !important; | |
} | |
.my-4 { | |
margin-top: 1rem !important; | |
margin-bottom: 1rem !important; | |
} | |
.ml-4 { | |
margin-left: 1rem !important; | |
} | |
.mr-4 { | |
margin-right: 1rem !important; | |
} | |
.mt-4 { | |
margin-top: 1rem !important; | |
} | |
.mb-4 { | |
margin-bottom: 1rem !important; | |
} | |
.pa-4 { | |
padding-left: 1rem !important; | |
padding-right: 1rem !important; | |
padding-top: 1rem !important; | |
padding-bottom: 1rem !important; | |
} | |
.px-4 { | |
padding-left: 1rem !important; | |
padding-right: 1rem !important; | |
} | |
.py-4 { | |
padding-top: 1rem !important; | |
padding-bottom: 1rem !important; | |
} | |
.pl-4 { | |
padding-left: 1rem !important; | |
} | |
.pr-4 { | |
padding-right: 1rem !important; | |
} | |
.pt-4 { | |
padding-top: 1rem !important; | |
} | |
.pb-4 { | |
padding-bottom: 1rem !important; | |
} | |
.ma-5 { | |
margin-left: 1.25rem !important; | |
margin-right: 1.25rem !important; | |
margin-top: 1.25rem !important; | |
margin-bottom: 1.25rem !important; | |
} | |
.mx-5 { | |
margin-left: 1.25rem !important; | |
margin-right: 1.25rem !important; | |
} | |
.my-5 { | |
margin-top: 1.25rem !important; | |
margin-bottom: 1.25rem !important; | |
} | |
.ml-5 { | |
margin-left: 1.25rem !important; | |
} | |
.mr-5 { | |
margin-right: 1.25rem !important; | |
} | |
.mt-5 { | |
margin-top: 1.25rem !important; | |
} | |
.mb-5 { | |
margin-bottom: 1.25rem !important; | |
} | |
.pa-5 { | |
padding-left: 1.25rem !important; | |
padding-right: 1.25rem !important; | |
padding-top: 1.25rem !important; | |
padding-bottom: 1.25rem !important; | |
} | |
.px-5 { | |
padding-left: 1.25rem !important; | |
padding-right: 1.25rem !important; | |
} | |
.py-5 { | |
padding-top: 1.25rem !important; | |
padding-bottom: 1.25rem !important; | |
} | |
.pl-5 { | |
padding-left: 1.25rem !important; | |
} | |
.pr-5 { | |
padding-right: 1.25rem !important; | |
} | |
.pt-5 { | |
padding-top: 1.25rem !important; | |
} | |
.pb-5 { | |
padding-bottom: 1.25rem !important; | |
} | |
.ma-6 { | |
margin-left: 1.5rem !important; | |
margin-right: 1.5rem !important; | |
margin-top: 1.5rem !important; | |
margin-bottom: 1.5rem !important; | |
} | |
.mx-6 { | |
margin-left: 1.5rem !important; | |
margin-right: 1.5rem !important; | |
} | |
.my-6 { | |
margin-top: 1.5rem !important; | |
margin-bottom: 1.5rem !important; | |
} | |
.ml-6 { | |
margin-left: 1.5rem !important; | |
} | |
.mr-6 { | |
margin-right: 1.5rem !important; | |
} | |
.mt-6 { | |
margin-top: 1.5rem !important; | |
} | |
.mb-6 { | |
margin-bottom: 1.5rem !important; | |
} | |
.pa-6 { | |
padding-left: 1.5rem !important; | |
padding-right: 1.5rem !important; | |
padding-top: 1.5rem !important; | |
padding-bottom: 1.5rem !important; | |
} | |
.px-6 { | |
padding-left: 1.5rem !important; | |
padding-right: 1.5rem !important; | |
} | |
.py-6 { | |
padding-top: 1.5rem !important; | |
padding-bottom: 1.5rem !important; | |
} | |
.pl-6 { | |
padding-left: 1.5rem !important; | |
} | |
.pr-6 { | |
padding-right: 1.5rem !important; | |
} | |
.pt-6 { | |
padding-top: 1.5rem !important; | |
} | |
.pb-6 { | |
padding-bottom: 1.5rem !important; | |
} | |
.ma-7 { | |
margin-left: 1.75rem !important; | |
margin-right: 1.75rem !important; | |
margin-top: 1.75rem !important; | |
margin-bottom: 1.75rem !important; | |
} | |
.mx-7 { | |
margin-left: 1.75rem !important; | |
margin-right: 1.75rem !important; | |
} | |
.my-7 { | |
margin-top: 1.75rem !important; | |
margin-bottom: 1.75rem !important; | |
} | |
.ml-7 { | |
margin-left: 1.75rem !important; | |
} | |
.mr-7 { | |
margin-right: 1.75rem !important; | |
} | |
.mt-7 { | |
margin-top: 1.75rem !important; | |
} | |
.mb-7 { | |
margin-bottom: 1.75rem !important; | |
} | |
.pa-7 { | |
padding-left: 1.75rem !important; | |
padding-right: 1.75rem !important; | |
padding-top: 1.75rem !important; | |
padding-bottom: 1.75rem !important; | |
} | |
.px-7 { | |
padding-left: 1.75rem !important; | |
padding-right: 1.75rem !important; | |
} | |
.py-7 { | |
padding-top: 1.75rem !important; | |
padding-bottom: 1.75rem !important; | |
} | |
.pl-7 { | |
padding-left: 1.75rem !important; | |
} | |
.pr-7 { | |
padding-right: 1.75rem !important; | |
} | |
.pt-7 { | |
padding-top: 1.75rem !important; | |
} | |
.pb-7 { | |
padding-bottom: 1.75rem !important; | |
} | |
.ma-8 { | |
margin-left: 2rem !important; | |
margin-right: 2rem !important; | |
margin-top: 2rem !important; | |
margin-bottom: 2rem !important; | |
} | |
.mx-8 { | |
margin-left: 2rem !important; | |
margin-right: 2rem !important; | |
} | |
.my-8 { | |
margin-top: 2rem !important; | |
margin-bottom: 2rem !important; | |
} | |
.ml-8 { | |
margin-left: 2rem !important; | |
} | |
.mr-8 { | |
margin-right: 2rem !important; | |
} | |
.mt-8 { | |
margin-top: 2rem !important; | |
} | |
.mb-8 { | |
margin-bottom: 2rem !important; | |
} | |
.pa-8 { | |
padding-left: 2rem !important; | |
padding-right: 2rem !important; | |
padding-top: 2rem !important; | |
padding-bottom: 2rem !important; | |
} | |
.px-8 { | |
padding-left: 2rem !important; | |
padding-right: 2rem !important; | |
} | |
.py-8 { | |
padding-top: 2rem !important; | |
padding-bottom: 2rem !important; | |
} | |
.pl-8 { | |
padding-left: 2rem !important; | |
} | |
.pr-8 { | |
padding-right: 2rem !important; | |
} | |
.pt-8 { | |
padding-top: 2rem !important; | |
} | |
.pb-8 { | |
padding-bottom: 2rem !important; | |
} | |
.ma-9 { | |
margin-left: 2.25rem !important; | |
margin-right: 2.25rem !important; | |
margin-top: 2.25rem !important; | |
margin-bottom: 2.25rem !important; | |
} | |
.mx-9 { | |
margin-left: 2.25rem !important; | |
margin-right: 2.25rem !important; | |
} | |
.my-9 { | |
margin-top: 2.25rem !important; | |
margin-bottom: 2.25rem !important; | |
} | |
.ml-9 { | |
margin-left: 2.25rem !important; | |
} | |
.mr-9 { | |
margin-right: 2.25rem !important; | |
} | |
.mt-9 { | |
margin-top: 2.25rem !important; | |
} | |
.mb-9 { | |
margin-bottom: 2.25rem !important; | |
} | |
.pa-9 { | |
padding-left: 2.25rem !important; | |
padding-right: 2.25rem !important; | |
padding-top: 2.25rem !important; | |
padding-bottom: 2.25rem !important; | |
} | |
.px-9 { | |
padding-left: 2.25rem !important; | |
padding-right: 2.25rem !important; | |
} | |
.py-9 { | |
padding-top: 2.25rem !important; | |
padding-bottom: 2.25rem !important; | |
} | |
.pl-9 { | |
padding-left: 2.25rem !important; | |
} | |
.pr-9 { | |
padding-right: 2.25rem !important; | |
} | |
.pt-9 { | |
padding-top: 2.25rem !important; | |
} | |
.pb-9 { | |
padding-bottom: 2.25rem !important; | |
} | |
.ma-10 { | |
margin-left: 2.5rem !important; | |
margin-right: 2.5rem !important; | |
margin-top: 2.5rem !important; | |
margin-bottom: 2.5rem !important; | |
} | |
.mx-10 { | |
margin-left: 2.5rem !important; | |
margin-right: 2.5rem !important; | |
} | |
.my-10 { | |
margin-top: 2.5rem !important; | |
margin-bottom: 2.5rem !important; | |
} | |
.ml-10 { | |
margin-left: 2.5rem !important; | |
} | |
.mr-10 { | |
margin-right: 2.5rem !important; | |
} | |
.mt-10 { | |
margin-top: 2.5rem !important; | |
} | |
.mb-10 { | |
margin-bottom: 2.5rem !important; | |
} | |
.pa-10 { | |
padding-left: 2.5rem !important; | |
padding-right: 2.5rem !important; | |
padding-top: 2.5rem !important; | |
padding-bottom: 2.5rem !important; | |
} | |
.px-10 { | |
padding-left: 2.5rem !important; | |
padding-right: 2.5rem !important; | |
} | |
.py-10 { | |
padding-top: 2.5rem !important; | |
padding-bottom: 2.5rem !important; | |
} | |
.pl-10 { | |
padding-left: 2.5rem !important; | |
} | |
.pr-10 { | |
padding-right: 2.5rem !important; | |
} | |
.pt-10 { | |
padding-top: 2.5rem !important; | |
} | |
.pb-10 { | |
padding-bottom: 2.5rem !important; | |
} | |
.ma-11 { | |
margin-left: 2.75rem !important; | |
margin-right: 2.75rem !important; | |
margin-top: 2.75rem !important; | |
margin-bottom: 2.75rem !important; | |
} | |
.mx-11 { | |
margin-left: 2.75rem !important; | |
margin-right: 2.75rem !important; | |
} | |
.my-11 { | |
margin-top: 2.75rem !important; | |
margin-bottom: 2.75rem !important; | |
} | |
.ml-11 { | |
margin-left: 2.75rem !important; | |
} | |
.mr-11 { | |
margin-right: 2.75rem !important; | |
} | |
.mt-11 { | |
margin-top: 2.75rem !important; | |
} | |
.mb-11 { | |
margin-bottom: 2.75rem !important; | |
} | |
.pa-11 { | |
padding-left: 2.75rem !important; | |
padding-right: 2.75rem !important; | |
padding-top: 2.75rem !important; | |
padding-bottom: 2.75rem !important; | |
} | |
.px-11 { | |
padding-left: 2.75rem !important; | |
padding-right: 2.75rem !important; | |
} | |
.py-11 { | |
padding-top: 2.75rem !important; | |
padding-bottom: 2.75rem !important; | |
} | |
.pl-11 { | |
padding-left: 2.75rem !important; | |
} | |
.pr-11 { | |
padding-right: 2.75rem !important; | |
} | |
.pt-11 { | |
padding-top: 2.75rem !important; | |
} | |
.pb-11 { | |
padding-bottom: 2.75rem !important; | |
} | |
.ma-12 { | |
margin-left: 3rem !important; | |
margin-right: 3rem !important; | |
margin-top: 3rem !important; | |
margin-bottom: 3rem !important; | |
} | |
.mx-12 { | |
margin-left: 3rem !important; | |
margin-right: 3rem !important; | |
} | |
.my-12 { | |
margin-top: 3rem !important; | |
margin-bottom: 3rem !important; | |
} | |
.ml-12 { | |
margin-left: 3rem !important; | |
} | |
.mr-12 { | |
margin-right: 3rem !important; | |
} | |
.mt-12 { | |
margin-top: 3rem !important; | |
} | |
.mb-12 { | |
margin-bottom: 3rem !important; | |
} | |
.pa-12 { | |
padding-left: 3rem !important; | |
padding-right: 3rem !important; | |
padding-top: 3rem !important; | |
padding-bottom: 3rem !important; | |
} | |
.px-12 { | |
padding-left: 3rem !important; | |
padding-right: 3rem !important; | |
} | |
.py-12 { | |
padding-top: 3rem !important; | |
padding-bottom: 3rem !important; | |
} | |
.pl-12 { | |
padding-left: 3rem !important; | |
} | |
.pr-12 { | |
padding-right: 3rem !important; | |
} | |
.pt-12 { | |
padding-top: 3rem !important; | |
} | |
.pb-12 { | |
padding-bottom: 3rem !important; | |
} | |
.ma-auto { | |
margin-left: auto !important; | |
margin-right: auto !important; | |
margin-top: auto !important; | |
margin-bottom: auto !important; | |
} | |
.mx-auto { | |
margin-left: auto !important; | |
margin-right: auto !important; | |
} | |
.my-auto { | |
margin-top: auto !important; | |
margin-bottom: auto !important; | |
} | |
.ml-auto { | |
margin-left: auto !important; | |
} | |
.mr-auto { | |
margin-right: auto !important; | |
} | |
.mt-auto { | |
margin-top: auto !important; | |
} | |
.mb-auto { | |
margin-bottom: auto !important; | |
} |
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
{ | |
"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