Last active
July 9, 2018 16:22
-
-
Save shoman4eg/c7da82f17a8d21e6a1469a10c425e245 to your computer and use it in GitHub Desktop.
Less space utilities
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
| .mt-5 { | |
| margin-top: 5px; | |
| } | |
| .mr-5 { | |
| margin-right: 5px; | |
| } | |
| .mb-5 { | |
| margin-bottom: 5px; | |
| } | |
| .ml-5 { | |
| margin-left: 5px; | |
| } | |
| .my-5 { | |
| margin-top: 5px; | |
| margin-bottom: 5px; | |
| } | |
| .mx-5 { | |
| margin-right: 5px; | |
| margin-left: 5px; | |
| } | |
| .m-5 { | |
| margin: 5px; | |
| } | |
| .mt-10 { | |
| margin-top: 10px; | |
| } | |
| .mr-10 { | |
| margin-right: 10px; | |
| } | |
| .mb-10 { | |
| margin-bottom: 10px; | |
| } | |
| .ml-10 { | |
| margin-left: 10px; | |
| } | |
| .my-10 { | |
| margin-top: 10px; | |
| margin-bottom: 10px; | |
| } | |
| .mx-10 { | |
| margin-right: 10px; | |
| margin-left: 10px; | |
| } | |
| .m-10 { | |
| margin: 10px; | |
| } | |
| .mt-15 { | |
| margin-top: 15px; | |
| } | |
| .mr-15 { | |
| margin-right: 15px; | |
| } | |
| .mb-15 { | |
| margin-bottom: 15px; | |
| } | |
| .ml-15 { | |
| margin-left: 15px; | |
| } | |
| .my-15 { | |
| margin-top: 15px; | |
| margin-bottom: 15px; | |
| } | |
| .mx-15 { | |
| margin-right: 15px; | |
| margin-left: 15px; | |
| } | |
| .m-15 { | |
| margin: 15px; | |
| } | |
| .mt-20 { | |
| margin-top: 20px; | |
| } | |
| .mr-20 { | |
| margin-right: 20px; | |
| } | |
| .mb-20 { | |
| margin-bottom: 20px; | |
| } | |
| .ml-20 { | |
| margin-left: 20px; | |
| } | |
| .my-20 { | |
| margin-top: 20px; | |
| margin-bottom: 20px; | |
| } | |
| .mx-20 { | |
| margin-right: 20px; | |
| margin-left: 20px; | |
| } | |
| .m-20 { | |
| margin: 20px; | |
| } | |
| .mt-25 { | |
| margin-top: 25px; | |
| } | |
| .mr-25 { | |
| margin-right: 25px; | |
| } | |
| .mb-25 { | |
| margin-bottom: 25px; | |
| } | |
| .ml-25 { | |
| margin-left: 25px; | |
| } | |
| .my-25 { | |
| margin-top: 25px; | |
| margin-bottom: 25px; | |
| } | |
| .mx-25 { | |
| margin-right: 25px; | |
| margin-left: 25px; | |
| } | |
| .m-25 { | |
| margin: 25px; | |
| } | |
| .mt-30 { | |
| margin-top: 30px; | |
| } | |
| .mr-30 { | |
| margin-right: 30px; | |
| } | |
| .mb-30 { | |
| margin-bottom: 30px; | |
| } | |
| .ml-30 { | |
| margin-left: 30px; | |
| } | |
| .my-30 { | |
| margin-top: 30px; | |
| margin-bottom: 30px; | |
| } | |
| .mx-30 { | |
| margin-right: 30px; | |
| margin-left: 30px; | |
| } | |
| .m-30 { | |
| margin: 30px; | |
| } | |
| .mt-35 { | |
| margin-top: 35px; | |
| } | |
| .mr-35 { | |
| margin-right: 35px; | |
| } | |
| .mb-35 { | |
| margin-bottom: 35px; | |
| } | |
| .ml-35 { | |
| margin-left: 35px; | |
| } | |
| .my-35 { | |
| margin-top: 35px; | |
| margin-bottom: 35px; | |
| } | |
| .mx-35 { | |
| margin-right: 35px; | |
| margin-left: 35px; | |
| } | |
| .m-35 { | |
| margin: 35px; | |
| } | |
| .mt-40 { | |
| margin-top: 40px; | |
| } | |
| .mr-40 { | |
| margin-right: 40px; | |
| } | |
| .mb-40 { | |
| margin-bottom: 40px; | |
| } | |
| .ml-40 { | |
| margin-left: 40px; | |
| } | |
| .my-40 { | |
| margin-top: 40px; | |
| margin-bottom: 40px; | |
| } | |
| .mx-40 { | |
| margin-right: 40px; | |
| margin-left: 40px; | |
| } | |
| .m-40 { | |
| margin: 40px; | |
| } | |
| .mt-45 { | |
| margin-top: 45px; | |
| } | |
| .mr-45 { | |
| margin-right: 45px; | |
| } | |
| .mb-45 { | |
| margin-bottom: 45px; | |
| } | |
| .ml-45 { | |
| margin-left: 45px; | |
| } | |
| .my-45 { | |
| margin-top: 45px; | |
| margin-bottom: 45px; | |
| } | |
| .mx-45 { | |
| margin-right: 45px; | |
| margin-left: 45px; | |
| } | |
| .m-45 { | |
| margin: 45px; | |
| } | |
| .mt-50 { | |
| margin-top: 50px; | |
| } | |
| .mr-50 { | |
| margin-right: 50px; | |
| } | |
| .mb-50 { | |
| margin-bottom: 50px; | |
| } | |
| .ml-50 { | |
| margin-left: 50px; | |
| } | |
| .my-50 { | |
| margin-top: 50px; | |
| margin-bottom: 50px; | |
| } | |
| .mx-50 { | |
| margin-right: 50px; | |
| margin-left: 50px; | |
| } | |
| .m-50 { | |
| margin: 50px; | |
| } | |
| .mt-60 { | |
| margin-top: 60px; | |
| } | |
| .mr-60 { | |
| margin-right: 60px; | |
| } | |
| .mb-60 { | |
| margin-bottom: 60px; | |
| } | |
| .ml-60 { | |
| margin-left: 60px; | |
| } | |
| .my-60 { | |
| margin-top: 60px; | |
| margin-bottom: 60px; | |
| } | |
| .mx-60 { | |
| margin-right: 60px; | |
| margin-left: 60px; | |
| } | |
| .m-60 { | |
| margin: 60px; | |
| } | |
| .mt-70 { | |
| margin-top: 70px; | |
| } | |
| .mr-70 { | |
| margin-right: 70px; | |
| } | |
| .mb-70 { | |
| margin-bottom: 70px; | |
| } | |
| .ml-70 { | |
| margin-left: 70px; | |
| } | |
| .my-70 { | |
| margin-top: 70px; | |
| margin-bottom: 70px; | |
| } | |
| .mx-70 { | |
| margin-right: 70px; | |
| margin-left: 70px; | |
| } | |
| .m-70 { | |
| margin: 70px; | |
| } | |
| .mt-80 { | |
| margin-top: 80px; | |
| } | |
| .mr-80 { | |
| margin-right: 80px; | |
| } | |
| .mb-80 { | |
| margin-bottom: 80px; | |
| } | |
| .ml-80 { | |
| margin-left: 80px; | |
| } | |
| .my-80 { | |
| margin-top: 80px; | |
| margin-bottom: 80px; | |
| } | |
| .mx-80 { | |
| margin-right: 80px; | |
| margin-left: 80px; | |
| } | |
| .m-80 { | |
| margin: 80px; | |
| } | |
| .mt-90 { | |
| margin-top: 90px; | |
| } | |
| .mr-90 { | |
| margin-right: 90px; | |
| } | |
| .mb-90 { | |
| margin-bottom: 90px; | |
| } | |
| .ml-90 { | |
| margin-left: 90px; | |
| } | |
| .my-90 { | |
| margin-top: 90px; | |
| margin-bottom: 90px; | |
| } | |
| .mx-90 { | |
| margin-right: 90px; | |
| margin-left: 90px; | |
| } | |
| .m-90 { | |
| margin: 90px; | |
| } | |
| .mt-100 { | |
| margin-top: 100px; | |
| } | |
| .mr-100 { | |
| margin-right: 100px; | |
| } | |
| .mb-100 { | |
| margin-bottom: 100px; | |
| } | |
| .ml-100 { | |
| margin-left: 100px; | |
| } | |
| .my-100 { | |
| margin-top: 100px; | |
| margin-bottom: 100px; | |
| } | |
| .mx-100 { | |
| margin-right: 100px; | |
| margin-left: 100px; | |
| } | |
| .m-100 { | |
| margin: 100px; | |
| } | |
| .mt-150 { | |
| margin-top: 150px; | |
| } | |
| .mr-150 { | |
| margin-right: 150px; | |
| } | |
| .mb-150 { | |
| margin-bottom: 150px; | |
| } | |
| .ml-150 { | |
| margin-left: 150px; | |
| } | |
| .my-150 { | |
| margin-top: 150px; | |
| margin-bottom: 150px; | |
| } | |
| .mx-150 { | |
| margin-right: 150px; | |
| margin-left: 150px; | |
| } | |
| .m-150 { | |
| margin: 150px; | |
| } | |
| .mt-200 { | |
| margin-top: 200px; | |
| } | |
| .mr-200 { | |
| margin-right: 200px; | |
| } | |
| .mb-200 { | |
| margin-bottom: 200px; | |
| } | |
| .ml-200 { | |
| margin-left: 200px; | |
| } | |
| .my-200 { | |
| margin-top: 200px; | |
| margin-bottom: 200px; | |
| } | |
| .mx-200 { | |
| margin-right: 200px; | |
| margin-left: 200px; | |
| } | |
| .m-200 { | |
| margin: 200px; | |
| } | |
| .pt-5 { | |
| padding-top: 5px; | |
| } | |
| .pr-5 { | |
| padding-right: 5px; | |
| } | |
| .pb-5 { | |
| padding-bottom: 5px; | |
| } | |
| .pl-5 { | |
| padding-left: 5px; | |
| } | |
| .py-5 { | |
| padding-top: 5px; | |
| padding-bottom: 5px; | |
| } | |
| .px-5 { | |
| padding-right: 5px; | |
| padding-left: 5px; | |
| } | |
| .p-5 { | |
| padding: 5px; | |
| } | |
| .pt-10 { | |
| padding-top: 10px; | |
| } | |
| .pr-10 { | |
| padding-right: 10px; | |
| } | |
| .pb-10 { | |
| padding-bottom: 10px; | |
| } | |
| .pl-10 { | |
| padding-left: 10px; | |
| } | |
| .py-10 { | |
| padding-top: 10px; | |
| padding-bottom: 10px; | |
| } | |
| .px-10 { | |
| padding-right: 10px; | |
| padding-left: 10px; | |
| } | |
| .p-10 { | |
| padding: 10px; | |
| } | |
| .pt-15 { | |
| padding-top: 15px; | |
| } | |
| .pr-15 { | |
| padding-right: 15px; | |
| } | |
| .pb-15 { | |
| padding-bottom: 15px; | |
| } | |
| .pl-15 { | |
| padding-left: 15px; | |
| } | |
| .py-15 { | |
| padding-top: 15px; | |
| padding-bottom: 15px; | |
| } | |
| .px-15 { | |
| padding-right: 15px; | |
| padding-left: 15px; | |
| } | |
| .p-15 { | |
| padding: 15px; | |
| } | |
| .pt-20 { | |
| padding-top: 20px; | |
| } | |
| .pr-20 { | |
| padding-right: 20px; | |
| } | |
| .pb-20 { | |
| padding-bottom: 20px; | |
| } | |
| .pl-20 { | |
| padding-left: 20px; | |
| } | |
| .py-20 { | |
| padding-top: 20px; | |
| padding-bottom: 20px; | |
| } | |
| .px-20 { | |
| padding-right: 20px; | |
| padding-left: 20px; | |
| } | |
| .p-20 { | |
| padding: 20px; | |
| } | |
| .pt-25 { | |
| padding-top: 25px; | |
| } | |
| .pr-25 { | |
| padding-right: 25px; | |
| } | |
| .pb-25 { | |
| padding-bottom: 25px; | |
| } | |
| .pl-25 { | |
| padding-left: 25px; | |
| } | |
| .py-25 { | |
| padding-top: 25px; | |
| padding-bottom: 25px; | |
| } | |
| .px-25 { | |
| padding-right: 25px; | |
| padding-left: 25px; | |
| } | |
| .p-25 { | |
| padding: 25px; | |
| } | |
| .pt-30 { | |
| padding-top: 30px; | |
| } | |
| .pr-30 { | |
| padding-right: 30px; | |
| } | |
| .pb-30 { | |
| padding-bottom: 30px; | |
| } | |
| .pl-30 { | |
| padding-left: 30px; | |
| } | |
| .py-30 { | |
| padding-top: 30px; | |
| padding-bottom: 30px; | |
| } | |
| .px-30 { | |
| padding-right: 30px; | |
| padding-left: 30px; | |
| } | |
| .p-30 { | |
| padding: 30px; | |
| } | |
| .pt-35 { | |
| padding-top: 35px; | |
| } | |
| .pr-35 { | |
| padding-right: 35px; | |
| } | |
| .pb-35 { | |
| padding-bottom: 35px; | |
| } | |
| .pl-35 { | |
| padding-left: 35px; | |
| } | |
| .py-35 { | |
| padding-top: 35px; | |
| padding-bottom: 35px; | |
| } | |
| .px-35 { | |
| padding-right: 35px; | |
| padding-left: 35px; | |
| } | |
| .p-35 { | |
| padding: 35px; | |
| } | |
| .pt-40 { | |
| padding-top: 40px; | |
| } | |
| .pr-40 { | |
| padding-right: 40px; | |
| } | |
| .pb-40 { | |
| padding-bottom: 40px; | |
| } | |
| .pl-40 { | |
| padding-left: 40px; | |
| } | |
| .py-40 { | |
| padding-top: 40px; | |
| padding-bottom: 40px; | |
| } | |
| .px-40 { | |
| padding-right: 40px; | |
| padding-left: 40px; | |
| } | |
| .p-40 { | |
| padding: 40px; | |
| } | |
| .pt-45 { | |
| padding-top: 45px; | |
| } | |
| .pr-45 { | |
| padding-right: 45px; | |
| } | |
| .pb-45 { | |
| padding-bottom: 45px; | |
| } | |
| .pl-45 { | |
| padding-left: 45px; | |
| } | |
| .py-45 { | |
| padding-top: 45px; | |
| padding-bottom: 45px; | |
| } | |
| .px-45 { | |
| padding-right: 45px; | |
| padding-left: 45px; | |
| } | |
| .p-45 { | |
| padding: 45px; | |
| } | |
| .pt-50 { | |
| padding-top: 50px; | |
| } | |
| .pr-50 { | |
| padding-right: 50px; | |
| } | |
| .pb-50 { | |
| padding-bottom: 50px; | |
| } | |
| .pl-50 { | |
| padding-left: 50px; | |
| } | |
| .py-50 { | |
| padding-top: 50px; | |
| padding-bottom: 50px; | |
| } | |
| .px-50 { | |
| padding-right: 50px; | |
| padding-left: 50px; | |
| } | |
| .p-50 { | |
| padding: 50px; | |
| } | |
| .pt-60 { | |
| padding-top: 60px; | |
| } | |
| .pr-60 { | |
| padding-right: 60px; | |
| } | |
| .pb-60 { | |
| padding-bottom: 60px; | |
| } | |
| .pl-60 { | |
| padding-left: 60px; | |
| } | |
| .py-60 { | |
| padding-top: 60px; | |
| padding-bottom: 60px; | |
| } | |
| .px-60 { | |
| padding-right: 60px; | |
| padding-left: 60px; | |
| } | |
| .p-60 { | |
| padding: 60px; | |
| } | |
| .pt-70 { | |
| padding-top: 70px; | |
| } | |
| .pr-70 { | |
| padding-right: 70px; | |
| } | |
| .pb-70 { | |
| padding-bottom: 70px; | |
| } | |
| .pl-70 { | |
| padding-left: 70px; | |
| } | |
| .py-70 { | |
| padding-top: 70px; | |
| padding-bottom: 70px; | |
| } | |
| .px-70 { | |
| padding-right: 70px; | |
| padding-left: 70px; | |
| } | |
| .p-70 { | |
| padding: 70px; | |
| } | |
| .pt-80 { | |
| padding-top: 80px; | |
| } | |
| .pr-80 { | |
| padding-right: 80px; | |
| } | |
| .pb-80 { | |
| padding-bottom: 80px; | |
| } | |
| .pl-80 { | |
| padding-left: 80px; | |
| } | |
| .py-80 { | |
| padding-top: 80px; | |
| padding-bottom: 80px; | |
| } | |
| .px-80 { | |
| padding-right: 80px; | |
| padding-left: 80px; | |
| } | |
| .p-80 { | |
| padding: 80px; | |
| } | |
| .pt-90 { | |
| padding-top: 90px; | |
| } | |
| .pr-90 { | |
| padding-right: 90px; | |
| } | |
| .pb-90 { | |
| padding-bottom: 90px; | |
| } | |
| .pl-90 { | |
| padding-left: 90px; | |
| } | |
| .py-90 { | |
| padding-top: 90px; | |
| padding-bottom: 90px; | |
| } | |
| .px-90 { | |
| padding-right: 90px; | |
| padding-left: 90px; | |
| } | |
| .p-90 { | |
| padding: 90px; | |
| } | |
| .pt-100 { | |
| padding-top: 100px; | |
| } | |
| .pr-100 { | |
| padding-right: 100px; | |
| } | |
| .pb-100 { | |
| padding-bottom: 100px; | |
| } | |
| .pl-100 { | |
| padding-left: 100px; | |
| } | |
| .py-100 { | |
| padding-top: 100px; | |
| padding-bottom: 100px; | |
| } | |
| .px-100 { | |
| padding-right: 100px; | |
| padding-left: 100px; | |
| } | |
| .p-100 { | |
| padding: 100px; | |
| } | |
| .pt-150 { | |
| padding-top: 150px; | |
| } | |
| .pr-150 { | |
| padding-right: 150px; | |
| } | |
| .pb-150 { | |
| padding-bottom: 150px; | |
| } | |
| .pl-150 { | |
| padding-left: 150px; | |
| } | |
| .py-150 { | |
| padding-top: 150px; | |
| padding-bottom: 150px; | |
| } | |
| .px-150 { | |
| padding-right: 150px; | |
| padding-left: 150px; | |
| } | |
| .p-150 { | |
| padding: 150px; | |
| } | |
| .pt-200 { | |
| padding-top: 200px; | |
| } | |
| .pr-200 { | |
| padding-right: 200px; | |
| } | |
| .pb-200 { | |
| padding-bottom: 200px; | |
| } | |
| .pl-200 { | |
| padding-left: 200px; | |
| } | |
| .py-200 { | |
| padding-top: 200px; | |
| padding-bottom: 200px; | |
| } | |
| .px-200 { | |
| padding-right: 200px; | |
| padding-left: 200px; | |
| } | |
| .p-200 { | |
| padding: 200px; | |
| } |
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
| @spacers: 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 60, 70, 80, 90, 100, 150, 200; | |
| // Margin | |
| .generate-margin-utilities(@i: 1) when (@i <= length(@spacers)) { | |
| @n: extract(@spacers, @i); | |
| .mt-@{n} { margin-top: ~"@{n}px"; } | |
| .mr-@{n} { margin-right:~"@{n}px"; } | |
| .mb-@{n} { margin-bottom:~"@{n}px"; } | |
| .ml-@{n} { margin-left:~"@{n}px"; } | |
| .my-@{n} { margin-top:~"@{n}px"; margin-bottom:~"@{n}px"; } | |
| .mx-@{n} { margin-right:~"@{n}px"; margin-left:~"@{n}px"; } | |
| .m-@{n} { margin:~"@{n}px"; } | |
| .generate-margin-utilities((@i + 1)); | |
| } | |
| .generate-margin-utilities(); | |
| // Padding | |
| .generate-padding-utilities(@i: 1) when (@i <= length(@spacers)) { | |
| @n: extract(@spacers, @i); | |
| .pt-@{n} { padding-top:~"@{n}px"; } | |
| .pr-@{n} { padding-right:~"@{n}px"; } | |
| .pb-@{n} { padding-bottom:~"@{n}px"; } | |
| .pl-@{n} { padding-left:~"@{n}px"; } | |
| .py-@{n} { padding-top:~"@{n}px"; padding-bottom:~"@{n}px"; } | |
| .px-@{n} { padding-right:~"@{n}px"; padding-left:~"@{n}px"; } | |
| .p-@{n} { padding:~"@{n}px"; } | |
| .generate-padding-utilities((@i + 1)); | |
| } | |
| .generate-padding-utilities(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment