Last active
December 1, 2020 14:20
-
-
Save M-ZubairAhmed/66a7c211a5c5a2d5d1bfcb14ee8dee9b to your computer and use it in GitHub Desktop.
Tailwind inspired utility classeses, 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-scale: ( | |
"-0": 0px, | |
"": 1px, | |
"half": 0.125rem, | |
"-1": 0.25rem, | |
"1half": 0.375rem, | |
"-2": 0.5rem, | |
"2half": 0.625rem, | |
"-3": 0.75rem, | |
"3half": 0.875rem, | |
"-4": 1rem, | |
"-5": 1.25rem, | |
"-6": 1.5rem, | |
"-7": 1.75rem, | |
"-8": 2rem, | |
"-9": 2.25rem, | |
"-10": 2.5rem, | |
"-11": 2.75rem, | |
"-12": 3rem, | |
"-14": 3.5rem, | |
"-16": 4rem, | |
"-20": 5rem, | |
"-24": 6rem, | |
"-28": 7rem, | |
"-32": 8rem, | |
"-36": 9rem, | |
"-40": 10rem, | |
"-44": 11rem, | |
"-48": 12rem, | |
"-52": 13rem, | |
"-56": 14rem, | |
"-60": 15rem, | |
"-64": 16rem, | |
"-72": 18rem, | |
"-80": 20rem, | |
"-96": 24rem, | |
); | |
@each $scale, $value in $spacing-scale { | |
.ms#{$scale}{ | |
margin-inline-start : $value | |
} | |
.me#{$scale}{ | |
margin-inline-end : $value | |
} | |
.mt#{$scale}{ | |
margin-block-start : $value | |
} | |
.mb#{$scale}{ | |
margin-block-end : $value | |
} | |
.ps#{$scale}{ | |
padding-inline-start : $value | |
} | |
.pe#{$scale}{ | |
padding-inline-end : $value | |
} | |
.pt#{$scale}{ | |
padding-block-start : $value | |
} | |
.pb#{$scale}{ | |
padding-block-end : $value | |
} | |
} |
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
.ms-0 { | |
margin-inline-start: 0px; | |
} | |
.me-0 { | |
margin-inline-end: 0px; | |
} | |
.mt-0 { | |
margin-block-start: 0px; | |
} | |
.mb-0 { | |
margin-block-end: 0px; | |
} | |
.ps-0 { | |
padding-inline-start: 0px; | |
} | |
.pe-0 { | |
padding-inline-end: 0px; | |
} | |
.pt-0 { | |
padding-block-start: 0px; | |
} | |
.pb-0 { | |
padding-block-end: 0px; | |
} | |
.ms { | |
margin-inline-start: 1px; | |
} | |
.me { | |
margin-inline-end: 1px; | |
} | |
.mt { | |
margin-block-start: 1px; | |
} | |
.mb { | |
margin-block-end: 1px; | |
} | |
.ps { | |
padding-inline-start: 1px; | |
} | |
.pe { | |
padding-inline-end: 1px; | |
} | |
.pt { | |
padding-block-start: 1px; | |
} | |
.pb { | |
padding-block-end: 1px; | |
} | |
.mshalf { | |
margin-inline-start: 0.125rem; | |
} | |
.mehalf { | |
margin-inline-end: 0.125rem; | |
} | |
.mthalf { | |
margin-block-start: 0.125rem; | |
} | |
.mbhalf { | |
margin-block-end: 0.125rem; | |
} | |
.pshalf { | |
padding-inline-start: 0.125rem; | |
} | |
.pehalf { | |
padding-inline-end: 0.125rem; | |
} | |
.pthalf { | |
padding-block-start: 0.125rem; | |
} | |
.pbhalf { | |
padding-block-end: 0.125rem; | |
} | |
.ms-1 { | |
margin-inline-start: 0.25rem; | |
} | |
.me-1 { | |
margin-inline-end: 0.25rem; | |
} | |
.mt-1 { | |
margin-block-start: 0.25rem; | |
} | |
.mb-1 { | |
margin-block-end: 0.25rem; | |
} | |
.ps-1 { | |
padding-inline-start: 0.25rem; | |
} | |
.pe-1 { | |
padding-inline-end: 0.25rem; | |
} | |
.pt-1 { | |
padding-block-start: 0.25rem; | |
} | |
.pb-1 { | |
padding-block-end: 0.25rem; | |
} | |
.ms1half { | |
margin-inline-start: 0.375rem; | |
} | |
.me1half { | |
margin-inline-end: 0.375rem; | |
} | |
.mt1half { | |
margin-block-start: 0.375rem; | |
} | |
.mb1half { | |
margin-block-end: 0.375rem; | |
} | |
.ps1half { | |
padding-inline-start: 0.375rem; | |
} | |
.pe1half { | |
padding-inline-end: 0.375rem; | |
} | |
.pt1half { | |
padding-block-start: 0.375rem; | |
} | |
.pb1half { | |
padding-block-end: 0.375rem; | |
} | |
.ms-2 { | |
margin-inline-start: 0.5rem; | |
} | |
.me-2 { | |
margin-inline-end: 0.5rem; | |
} | |
.mt-2 { | |
margin-block-start: 0.5rem; | |
} | |
.mb-2 { | |
margin-block-end: 0.5rem; | |
} | |
.ps-2 { | |
padding-inline-start: 0.5rem; | |
} | |
.pe-2 { | |
padding-inline-end: 0.5rem; | |
} | |
.pt-2 { | |
padding-block-start: 0.5rem; | |
} | |
.pb-2 { | |
padding-block-end: 0.5rem; | |
} | |
.ms2half { | |
margin-inline-start: 0.625rem; | |
} | |
.me2half { | |
margin-inline-end: 0.625rem; | |
} | |
.mt2half { | |
margin-block-start: 0.625rem; | |
} | |
.mb2half { | |
margin-block-end: 0.625rem; | |
} | |
.ps2half { | |
padding-inline-start: 0.625rem; | |
} | |
.pe2half { | |
padding-inline-end: 0.625rem; | |
} | |
.pt2half { | |
padding-block-start: 0.625rem; | |
} | |
.pb2half { | |
padding-block-end: 0.625rem; | |
} | |
.ms-3 { | |
margin-inline-start: 0.75rem; | |
} | |
.me-3 { | |
margin-inline-end: 0.75rem; | |
} | |
.mt-3 { | |
margin-block-start: 0.75rem; | |
} | |
.mb-3 { | |
margin-block-end: 0.75rem; | |
} | |
.ps-3 { | |
padding-inline-start: 0.75rem; | |
} | |
.pe-3 { | |
padding-inline-end: 0.75rem; | |
} | |
.pt-3 { | |
padding-block-start: 0.75rem; | |
} | |
.pb-3 { | |
padding-block-end: 0.75rem; | |
} | |
.ms3half { | |
margin-inline-start: 0.875rem; | |
} | |
.me3half { | |
margin-inline-end: 0.875rem; | |
} | |
.mt3half { | |
margin-block-start: 0.875rem; | |
} | |
.mb3half { | |
margin-block-end: 0.875rem; | |
} | |
.ps3half { | |
padding-inline-start: 0.875rem; | |
} | |
.pe3half { | |
padding-inline-end: 0.875rem; | |
} | |
.pt3half { | |
padding-block-start: 0.875rem; | |
} | |
.pb3half { | |
padding-block-end: 0.875rem; | |
} | |
.ms-4 { | |
margin-inline-start: 1rem; | |
} | |
.me-4 { | |
margin-inline-end: 1rem; | |
} | |
.mt-4 { | |
margin-block-start: 1rem; | |
} | |
.mb-4 { | |
margin-block-end: 1rem; | |
} | |
.ps-4 { | |
padding-inline-start: 1rem; | |
} | |
.pe-4 { | |
padding-inline-end: 1rem; | |
} | |
.pt-4 { | |
padding-block-start: 1rem; | |
} | |
.pb-4 { | |
padding-block-end: 1rem; | |
} | |
.ms-5 { | |
margin-inline-start: 1.25rem; | |
} | |
.me-5 { | |
margin-inline-end: 1.25rem; | |
} | |
.mt-5 { | |
margin-block-start: 1.25rem; | |
} | |
.mb-5 { | |
margin-block-end: 1.25rem; | |
} | |
.ps-5 { | |
padding-inline-start: 1.25rem; | |
} | |
.pe-5 { | |
padding-inline-end: 1.25rem; | |
} | |
.pt-5 { | |
padding-block-start: 1.25rem; | |
} | |
.pb-5 { | |
padding-block-end: 1.25rem; | |
} | |
.ms-6 { | |
margin-inline-start: 1.5rem; | |
} | |
.me-6 { | |
margin-inline-end: 1.5rem; | |
} | |
.mt-6 { | |
margin-block-start: 1.5rem; | |
} | |
.mb-6 { | |
margin-block-end: 1.5rem; | |
} | |
.ps-6 { | |
padding-inline-start: 1.5rem; | |
} | |
.pe-6 { | |
padding-inline-end: 1.5rem; | |
} | |
.pt-6 { | |
padding-block-start: 1.5rem; | |
} | |
.pb-6 { | |
padding-block-end: 1.5rem; | |
} | |
.ms-7 { | |
margin-inline-start: 1.75rem; | |
} | |
.me-7 { | |
margin-inline-end: 1.75rem; | |
} | |
.mt-7 { | |
margin-block-start: 1.75rem; | |
} | |
.mb-7 { | |
margin-block-end: 1.75rem; | |
} | |
.ps-7 { | |
padding-inline-start: 1.75rem; | |
} | |
.pe-7 { | |
padding-inline-end: 1.75rem; | |
} | |
.pt-7 { | |
padding-block-start: 1.75rem; | |
} | |
.pb-7 { | |
padding-block-end: 1.75rem; | |
} | |
.ms-8 { | |
margin-inline-start: 2rem; | |
} | |
.me-8 { | |
margin-inline-end: 2rem; | |
} | |
.mt-8 { | |
margin-block-start: 2rem; | |
} | |
.mb-8 { | |
margin-block-end: 2rem; | |
} | |
.ps-8 { | |
padding-inline-start: 2rem; | |
} | |
.pe-8 { | |
padding-inline-end: 2rem; | |
} | |
.pt-8 { | |
padding-block-start: 2rem; | |
} | |
.pb-8 { | |
padding-block-end: 2rem; | |
} | |
.ms-9 { | |
margin-inline-start: 2.25rem; | |
} | |
.me-9 { | |
margin-inline-end: 2.25rem; | |
} | |
.mt-9 { | |
margin-block-start: 2.25rem; | |
} | |
.mb-9 { | |
margin-block-end: 2.25rem; | |
} | |
.ps-9 { | |
padding-inline-start: 2.25rem; | |
} | |
.pe-9 { | |
padding-inline-end: 2.25rem; | |
} | |
.pt-9 { | |
padding-block-start: 2.25rem; | |
} | |
.pb-9 { | |
padding-block-end: 2.25rem; | |
} | |
.ms-10 { | |
margin-inline-start: 2.5rem; | |
} | |
.me-10 { | |
margin-inline-end: 2.5rem; | |
} | |
.mt-10 { | |
margin-block-start: 2.5rem; | |
} | |
.mb-10 { | |
margin-block-end: 2.5rem; | |
} | |
.ps-10 { | |
padding-inline-start: 2.5rem; | |
} | |
.pe-10 { | |
padding-inline-end: 2.5rem; | |
} | |
.pt-10 { | |
padding-block-start: 2.5rem; | |
} | |
.pb-10 { | |
padding-block-end: 2.5rem; | |
} | |
.ms-11 { | |
margin-inline-start: 2.75rem; | |
} | |
.me-11 { | |
margin-inline-end: 2.75rem; | |
} | |
.mt-11 { | |
margin-block-start: 2.75rem; | |
} | |
.mb-11 { | |
margin-block-end: 2.75rem; | |
} | |
.ps-11 { | |
padding-inline-start: 2.75rem; | |
} | |
.pe-11 { | |
padding-inline-end: 2.75rem; | |
} | |
.pt-11 { | |
padding-block-start: 2.75rem; | |
} | |
.pb-11 { | |
padding-block-end: 2.75rem; | |
} | |
.ms-12 { | |
margin-inline-start: 3rem; | |
} | |
.me-12 { | |
margin-inline-end: 3rem; | |
} | |
.mt-12 { | |
margin-block-start: 3rem; | |
} | |
.mb-12 { | |
margin-block-end: 3rem; | |
} | |
.ps-12 { | |
padding-inline-start: 3rem; | |
} | |
.pe-12 { | |
padding-inline-end: 3rem; | |
} | |
.pt-12 { | |
padding-block-start: 3rem; | |
} | |
.pb-12 { | |
padding-block-end: 3rem; | |
} | |
.ms-14 { | |
margin-inline-start: 3.5rem; | |
} | |
.me-14 { | |
margin-inline-end: 3.5rem; | |
} | |
.mt-14 { | |
margin-block-start: 3.5rem; | |
} | |
.mb-14 { | |
margin-block-end: 3.5rem; | |
} | |
.ps-14 { | |
padding-inline-start: 3.5rem; | |
} | |
.pe-14 { | |
padding-inline-end: 3.5rem; | |
} | |
.pt-14 { | |
padding-block-start: 3.5rem; | |
} | |
.pb-14 { | |
padding-block-end: 3.5rem; | |
} | |
.ms-16 { | |
margin-inline-start: 4rem; | |
} | |
.me-16 { | |
margin-inline-end: 4rem; | |
} | |
.mt-16 { | |
margin-block-start: 4rem; | |
} | |
.mb-16 { | |
margin-block-end: 4rem; | |
} | |
.ps-16 { | |
padding-inline-start: 4rem; | |
} | |
.pe-16 { | |
padding-inline-end: 4rem; | |
} | |
.pt-16 { | |
padding-block-start: 4rem; | |
} | |
.pb-16 { | |
padding-block-end: 4rem; | |
} | |
.ms-20 { | |
margin-inline-start: 5rem; | |
} | |
.me-20 { | |
margin-inline-end: 5rem; | |
} | |
.mt-20 { | |
margin-block-start: 5rem; | |
} | |
.mb-20 { | |
margin-block-end: 5rem; | |
} | |
.ps-20 { | |
padding-inline-start: 5rem; | |
} | |
.pe-20 { | |
padding-inline-end: 5rem; | |
} | |
.pt-20 { | |
padding-block-start: 5rem; | |
} | |
.pb-20 { | |
padding-block-end: 5rem; | |
} | |
.ms-24 { | |
margin-inline-start: 6rem; | |
} | |
.me-24 { | |
margin-inline-end: 6rem; | |
} | |
.mt-24 { | |
margin-block-start: 6rem; | |
} | |
.mb-24 { | |
margin-block-end: 6rem; | |
} | |
.ps-24 { | |
padding-inline-start: 6rem; | |
} | |
.pe-24 { | |
padding-inline-end: 6rem; | |
} | |
.pt-24 { | |
padding-block-start: 6rem; | |
} | |
.pb-24 { | |
padding-block-end: 6rem; | |
} | |
.ms-28 { | |
margin-inline-start: 7rem; | |
} | |
.me-28 { | |
margin-inline-end: 7rem; | |
} | |
.mt-28 { | |
margin-block-start: 7rem; | |
} | |
.mb-28 { | |
margin-block-end: 7rem; | |
} | |
.ps-28 { | |
padding-inline-start: 7rem; | |
} | |
.pe-28 { | |
padding-inline-end: 7rem; | |
} | |
.pt-28 { | |
padding-block-start: 7rem; | |
} | |
.pb-28 { | |
padding-block-end: 7rem; | |
} | |
.ms-32 { | |
margin-inline-start: 8rem; | |
} | |
.me-32 { | |
margin-inline-end: 8rem; | |
} | |
.mt-32 { | |
margin-block-start: 8rem; | |
} | |
.mb-32 { | |
margin-block-end: 8rem; | |
} | |
.ps-32 { | |
padding-inline-start: 8rem; | |
} | |
.pe-32 { | |
padding-inline-end: 8rem; | |
} | |
.pt-32 { | |
padding-block-start: 8rem; | |
} | |
.pb-32 { | |
padding-block-end: 8rem; | |
} | |
.ms-36 { | |
margin-inline-start: 9rem; | |
} | |
.me-36 { | |
margin-inline-end: 9rem; | |
} | |
.mt-36 { | |
margin-block-start: 9rem; | |
} | |
.mb-36 { | |
margin-block-end: 9rem; | |
} | |
.ps-36 { | |
padding-inline-start: 9rem; | |
} | |
.pe-36 { | |
padding-inline-end: 9rem; | |
} | |
.pt-36 { | |
padding-block-start: 9rem; | |
} | |
.pb-36 { | |
padding-block-end: 9rem; | |
} | |
.ms-40 { | |
margin-inline-start: 10rem; | |
} | |
.me-40 { | |
margin-inline-end: 10rem; | |
} | |
.mt-40 { | |
margin-block-start: 10rem; | |
} | |
.mb-40 { | |
margin-block-end: 10rem; | |
} | |
.ps-40 { | |
padding-inline-start: 10rem; | |
} | |
.pe-40 { | |
padding-inline-end: 10rem; | |
} | |
.pt-40 { | |
padding-block-start: 10rem; | |
} | |
.pb-40 { | |
padding-block-end: 10rem; | |
} | |
.ms-44 { | |
margin-inline-start: 11rem; | |
} | |
.me-44 { | |
margin-inline-end: 11rem; | |
} | |
.mt-44 { | |
margin-block-start: 11rem; | |
} | |
.mb-44 { | |
margin-block-end: 11rem; | |
} | |
.ps-44 { | |
padding-inline-start: 11rem; | |
} | |
.pe-44 { | |
padding-inline-end: 11rem; | |
} | |
.pt-44 { | |
padding-block-start: 11rem; | |
} | |
.pb-44 { | |
padding-block-end: 11rem; | |
} | |
.ms-48 { | |
margin-inline-start: 12rem; | |
} | |
.me-48 { | |
margin-inline-end: 12rem; | |
} | |
.mt-48 { | |
margin-block-start: 12rem; | |
} | |
.mb-48 { | |
margin-block-end: 12rem; | |
} | |
.ps-48 { | |
padding-inline-start: 12rem; | |
} | |
.pe-48 { | |
padding-inline-end: 12rem; | |
} | |
.pt-48 { | |
padding-block-start: 12rem; | |
} | |
.pb-48 { | |
padding-block-end: 12rem; | |
} | |
.ms-52 { | |
margin-inline-start: 13rem; | |
} | |
.me-52 { | |
margin-inline-end: 13rem; | |
} | |
.mt-52 { | |
margin-block-start: 13rem; | |
} | |
.mb-52 { | |
margin-block-end: 13rem; | |
} | |
.ps-52 { | |
padding-inline-start: 13rem; | |
} | |
.pe-52 { | |
padding-inline-end: 13rem; | |
} | |
.pt-52 { | |
padding-block-start: 13rem; | |
} | |
.pb-52 { | |
padding-block-end: 13rem; | |
} | |
.ms-56 { | |
margin-inline-start: 14rem; | |
} | |
.me-56 { | |
margin-inline-end: 14rem; | |
} | |
.mt-56 { | |
margin-block-start: 14rem; | |
} | |
.mb-56 { | |
margin-block-end: 14rem; | |
} | |
.ps-56 { | |
padding-inline-start: 14rem; | |
} | |
.pe-56 { | |
padding-inline-end: 14rem; | |
} | |
.pt-56 { | |
padding-block-start: 14rem; | |
} | |
.pb-56 { | |
padding-block-end: 14rem; | |
} | |
.ms-60 { | |
margin-inline-start: 15rem; | |
} | |
.me-60 { | |
margin-inline-end: 15rem; | |
} | |
.mt-60 { | |
margin-block-start: 15rem; | |
} | |
.mb-60 { | |
margin-block-end: 15rem; | |
} | |
.ps-60 { | |
padding-inline-start: 15rem; | |
} | |
.pe-60 { | |
padding-inline-end: 15rem; | |
} | |
.pt-60 { | |
padding-block-start: 15rem; | |
} | |
.pb-60 { | |
padding-block-end: 15rem; | |
} | |
.ms-64 { | |
margin-inline-start: 16rem; | |
} | |
.me-64 { | |
margin-inline-end: 16rem; | |
} | |
.mt-64 { | |
margin-block-start: 16rem; | |
} | |
.mb-64 { | |
margin-block-end: 16rem; | |
} | |
.ps-64 { | |
padding-inline-start: 16rem; | |
} | |
.pe-64 { | |
padding-inline-end: 16rem; | |
} | |
.pt-64 { | |
padding-block-start: 16rem; | |
} | |
.pb-64 { | |
padding-block-end: 16rem; | |
} | |
.ms-72 { | |
margin-inline-start: 18rem; | |
} | |
.me-72 { | |
margin-inline-end: 18rem; | |
} | |
.mt-72 { | |
margin-block-start: 18rem; | |
} | |
.mb-72 { | |
margin-block-end: 18rem; | |
} | |
.ps-72 { | |
padding-inline-start: 18rem; | |
} | |
.pe-72 { | |
padding-inline-end: 18rem; | |
} | |
.pt-72 { | |
padding-block-start: 18rem; | |
} | |
.pb-72 { | |
padding-block-end: 18rem; | |
} | |
.ms-80 { | |
margin-inline-start: 20rem; | |
} | |
.me-80 { | |
margin-inline-end: 20rem; | |
} | |
.mt-80 { | |
margin-block-start: 20rem; | |
} | |
.mb-80 { | |
margin-block-end: 20rem; | |
} | |
.ps-80 { | |
padding-inline-start: 20rem; | |
} | |
.pe-80 { | |
padding-inline-end: 20rem; | |
} | |
.pt-80 { | |
padding-block-start: 20rem; | |
} | |
.pb-80 { | |
padding-block-end: 20rem; | |
} | |
.ms-96 { | |
margin-inline-start: 24rem; | |
} | |
.me-96 { | |
margin-inline-end: 24rem; | |
} | |
.mt-96 { | |
margin-block-start: 24rem; | |
} | |
.mb-96 { | |
margin-block-end: 24rem; | |
} | |
.ps-96 { | |
padding-inline-start: 24rem; | |
} | |
.pe-96 { | |
padding-inline-end: 24rem; | |
} | |
.pt-96 { | |
padding-block-start: 24rem; | |
} | |
.pb-96 { | |
padding-block-end: 24rem; | |
} |
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