Created
July 26, 2015 03:53
-
-
Save conwayanderson/c4d93122ca9b726a1f59 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
| // ---- | |
| // Sass (v3.4.14) | |
| // Compass (v1.0.3) | |
| // ---- | |
| // Unit Variables | |
| $unit-base: 4px; | |
| $unit-xl: 60px; | |
| $unit-lg: 52px; | |
| $unit-md: 44px; | |
| $unit-sm: 36px; | |
| $unit-xs: 24px; | |
| $unit-xxs: 16px; | |
| // Spacing | |
| $properties: 'margin', 'padding'; | |
| $directions: 'top', 'right', 'bottom', 'left'; | |
| @for $num from 0 through 24 { | |
| @each $property in $properties { | |
| @each $direction in $directions { | |
| .#{str-slice($property,0,1)}#{str-slice($direction,0,1)}--#{$num}x { | |
| #{$property}-#{$direction}: ($unit-base * $num); | |
| } | |
| } | |
| .#{str-slice($property,0,1)}v--#{$num}x { | |
| @extend .#{str-slice($property,0,1)}t--#{$num}x; | |
| @extend .#{str-slice($property,0,1)}b--#{$num}x; | |
| } | |
| .#{str-slice($property,0,1)}h--#{$num}x { | |
| @extend .#{str-slice($property,0,1)}r--#{$num}x; | |
| @extend .#{str-slice($property,0,1)}l--#{$num}x; | |
| } | |
| .#{str-slice($property,0,1)}--#{$num}x { | |
| #{$property}: $unit-base * $num; | |
| } | |
| } | |
| } |
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--0x, .mv--0x { | |
| margin-top: 0px; | |
| } | |
| .mr--0x, .mh--0x { | |
| margin-right: 0px; | |
| } | |
| .mb--0x, .mv--0x { | |
| margin-bottom: 0px; | |
| } | |
| .ml--0x, .mh--0x { | |
| margin-left: 0px; | |
| } | |
| .m--0x { | |
| margin: 0px; | |
| } | |
| .pt--0x, .pv--0x { | |
| padding-top: 0px; | |
| } | |
| .pr--0x, .ph--0x { | |
| padding-right: 0px; | |
| } | |
| .pb--0x, .pv--0x { | |
| padding-bottom: 0px; | |
| } | |
| .pl--0x, .ph--0x { | |
| padding-left: 0px; | |
| } | |
| .p--0x { | |
| padding: 0px; | |
| } | |
| .mt--1x, .mv--1x { | |
| margin-top: 4px; | |
| } | |
| .mr--1x, .mh--1x { | |
| margin-right: 4px; | |
| } | |
| .mb--1x, .mv--1x { | |
| margin-bottom: 4px; | |
| } | |
| .ml--1x, .mh--1x { | |
| margin-left: 4px; | |
| } | |
| .m--1x { | |
| margin: 4px; | |
| } | |
| .pt--1x, .pv--1x { | |
| padding-top: 4px; | |
| } | |
| .pr--1x, .ph--1x { | |
| padding-right: 4px; | |
| } | |
| .pb--1x, .pv--1x { | |
| padding-bottom: 4px; | |
| } | |
| .pl--1x, .ph--1x { | |
| padding-left: 4px; | |
| } | |
| .p--1x { | |
| padding: 4px; | |
| } | |
| .mt--2x, .mv--2x { | |
| margin-top: 8px; | |
| } | |
| .mr--2x, .mh--2x { | |
| margin-right: 8px; | |
| } | |
| .mb--2x, .mv--2x { | |
| margin-bottom: 8px; | |
| } | |
| .ml--2x, .mh--2x { | |
| margin-left: 8px; | |
| } | |
| .m--2x { | |
| margin: 8px; | |
| } | |
| .pt--2x, .pv--2x { | |
| padding-top: 8px; | |
| } | |
| .pr--2x, .ph--2x { | |
| padding-right: 8px; | |
| } | |
| .pb--2x, .pv--2x { | |
| padding-bottom: 8px; | |
| } | |
| .pl--2x, .ph--2x { | |
| padding-left: 8px; | |
| } | |
| .p--2x { | |
| padding: 8px; | |
| } | |
| .mt--3x, .mv--3x { | |
| margin-top: 12px; | |
| } | |
| .mr--3x, .mh--3x { | |
| margin-right: 12px; | |
| } | |
| .mb--3x, .mv--3x { | |
| margin-bottom: 12px; | |
| } | |
| .ml--3x, .mh--3x { | |
| margin-left: 12px; | |
| } | |
| .m--3x { | |
| margin: 12px; | |
| } | |
| .pt--3x, .pv--3x { | |
| padding-top: 12px; | |
| } | |
| .pr--3x, .ph--3x { | |
| padding-right: 12px; | |
| } | |
| .pb--3x, .pv--3x { | |
| padding-bottom: 12px; | |
| } | |
| .pl--3x, .ph--3x { | |
| padding-left: 12px; | |
| } | |
| .p--3x { | |
| padding: 12px; | |
| } | |
| .mt--4x, .mv--4x { | |
| margin-top: 16px; | |
| } | |
| .mr--4x, .mh--4x { | |
| margin-right: 16px; | |
| } | |
| .mb--4x, .mv--4x { | |
| margin-bottom: 16px; | |
| } | |
| .ml--4x, .mh--4x { | |
| margin-left: 16px; | |
| } | |
| .m--4x { | |
| margin: 16px; | |
| } | |
| .pt--4x, .pv--4x { | |
| padding-top: 16px; | |
| } | |
| .pr--4x, .ph--4x { | |
| padding-right: 16px; | |
| } | |
| .pb--4x, .pv--4x { | |
| padding-bottom: 16px; | |
| } | |
| .pl--4x, .ph--4x { | |
| padding-left: 16px; | |
| } | |
| .p--4x { | |
| padding: 16px; | |
| } | |
| .mt--5x, .mv--5x { | |
| margin-top: 20px; | |
| } | |
| .mr--5x, .mh--5x { | |
| margin-right: 20px; | |
| } | |
| .mb--5x, .mv--5x { | |
| margin-bottom: 20px; | |
| } | |
| .ml--5x, .mh--5x { | |
| margin-left: 20px; | |
| } | |
| .m--5x { | |
| margin: 20px; | |
| } | |
| .pt--5x, .pv--5x { | |
| padding-top: 20px; | |
| } | |
| .pr--5x, .ph--5x { | |
| padding-right: 20px; | |
| } | |
| .pb--5x, .pv--5x { | |
| padding-bottom: 20px; | |
| } | |
| .pl--5x, .ph--5x { | |
| padding-left: 20px; | |
| } | |
| .p--5x { | |
| padding: 20px; | |
| } | |
| .mt--6x, .mv--6x { | |
| margin-top: 24px; | |
| } | |
| .mr--6x, .mh--6x { | |
| margin-right: 24px; | |
| } | |
| .mb--6x, .mv--6x { | |
| margin-bottom: 24px; | |
| } | |
| .ml--6x, .mh--6x { | |
| margin-left: 24px; | |
| } | |
| .m--6x { | |
| margin: 24px; | |
| } | |
| .pt--6x, .pv--6x { | |
| padding-top: 24px; | |
| } | |
| .pr--6x, .ph--6x { | |
| padding-right: 24px; | |
| } | |
| .pb--6x, .pv--6x { | |
| padding-bottom: 24px; | |
| } | |
| .pl--6x, .ph--6x { | |
| padding-left: 24px; | |
| } | |
| .p--6x { | |
| padding: 24px; | |
| } | |
| .mt--7x, .mv--7x { | |
| margin-top: 28px; | |
| } | |
| .mr--7x, .mh--7x { | |
| margin-right: 28px; | |
| } | |
| .mb--7x, .mv--7x { | |
| margin-bottom: 28px; | |
| } | |
| .ml--7x, .mh--7x { | |
| margin-left: 28px; | |
| } | |
| .m--7x { | |
| margin: 28px; | |
| } | |
| .pt--7x, .pv--7x { | |
| padding-top: 28px; | |
| } | |
| .pr--7x, .ph--7x { | |
| padding-right: 28px; | |
| } | |
| .pb--7x, .pv--7x { | |
| padding-bottom: 28px; | |
| } | |
| .pl--7x, .ph--7x { | |
| padding-left: 28px; | |
| } | |
| .p--7x { | |
| padding: 28px; | |
| } | |
| .mt--8x, .mv--8x { | |
| margin-top: 32px; | |
| } | |
| .mr--8x, .mh--8x { | |
| margin-right: 32px; | |
| } | |
| .mb--8x, .mv--8x { | |
| margin-bottom: 32px; | |
| } | |
| .ml--8x, .mh--8x { | |
| margin-left: 32px; | |
| } | |
| .m--8x { | |
| margin: 32px; | |
| } | |
| .pt--8x, .pv--8x { | |
| padding-top: 32px; | |
| } | |
| .pr--8x, .ph--8x { | |
| padding-right: 32px; | |
| } | |
| .pb--8x, .pv--8x { | |
| padding-bottom: 32px; | |
| } | |
| .pl--8x, .ph--8x { | |
| padding-left: 32px; | |
| } | |
| .p--8x { | |
| padding: 32px; | |
| } | |
| .mt--9x, .mv--9x { | |
| margin-top: 36px; | |
| } | |
| .mr--9x, .mh--9x { | |
| margin-right: 36px; | |
| } | |
| .mb--9x, .mv--9x { | |
| margin-bottom: 36px; | |
| } | |
| .ml--9x, .mh--9x { | |
| margin-left: 36px; | |
| } | |
| .m--9x { | |
| margin: 36px; | |
| } | |
| .pt--9x, .pv--9x { | |
| padding-top: 36px; | |
| } | |
| .pr--9x, .ph--9x { | |
| padding-right: 36px; | |
| } | |
| .pb--9x, .pv--9x { | |
| padding-bottom: 36px; | |
| } | |
| .pl--9x, .ph--9x { | |
| padding-left: 36px; | |
| } | |
| .p--9x { | |
| padding: 36px; | |
| } | |
| .mt--10x, .mv--10x { | |
| margin-top: 40px; | |
| } | |
| .mr--10x, .mh--10x { | |
| margin-right: 40px; | |
| } | |
| .mb--10x, .mv--10x { | |
| margin-bottom: 40px; | |
| } | |
| .ml--10x, .mh--10x { | |
| margin-left: 40px; | |
| } | |
| .m--10x { | |
| margin: 40px; | |
| } | |
| .pt--10x, .pv--10x { | |
| padding-top: 40px; | |
| } | |
| .pr--10x, .ph--10x { | |
| padding-right: 40px; | |
| } | |
| .pb--10x, .pv--10x { | |
| padding-bottom: 40px; | |
| } | |
| .pl--10x, .ph--10x { | |
| padding-left: 40px; | |
| } | |
| .p--10x { | |
| padding: 40px; | |
| } | |
| .mt--11x, .mv--11x { | |
| margin-top: 44px; | |
| } | |
| .mr--11x, .mh--11x { | |
| margin-right: 44px; | |
| } | |
| .mb--11x, .mv--11x { | |
| margin-bottom: 44px; | |
| } | |
| .ml--11x, .mh--11x { | |
| margin-left: 44px; | |
| } | |
| .m--11x { | |
| margin: 44px; | |
| } | |
| .pt--11x, .pv--11x { | |
| padding-top: 44px; | |
| } | |
| .pr--11x, .ph--11x { | |
| padding-right: 44px; | |
| } | |
| .pb--11x, .pv--11x { | |
| padding-bottom: 44px; | |
| } | |
| .pl--11x, .ph--11x { | |
| padding-left: 44px; | |
| } | |
| .p--11x { | |
| padding: 44px; | |
| } | |
| .mt--12x, .mv--12x { | |
| margin-top: 48px; | |
| } | |
| .mr--12x, .mh--12x { | |
| margin-right: 48px; | |
| } | |
| .mb--12x, .mv--12x { | |
| margin-bottom: 48px; | |
| } | |
| .ml--12x, .mh--12x { | |
| margin-left: 48px; | |
| } | |
| .m--12x { | |
| margin: 48px; | |
| } | |
| .pt--12x, .pv--12x { | |
| padding-top: 48px; | |
| } | |
| .pr--12x, .ph--12x { | |
| padding-right: 48px; | |
| } | |
| .pb--12x, .pv--12x { | |
| padding-bottom: 48px; | |
| } | |
| .pl--12x, .ph--12x { | |
| padding-left: 48px; | |
| } | |
| .p--12x { | |
| padding: 48px; | |
| } | |
| .mt--13x, .mv--13x { | |
| margin-top: 52px; | |
| } | |
| .mr--13x, .mh--13x { | |
| margin-right: 52px; | |
| } | |
| .mb--13x, .mv--13x { | |
| margin-bottom: 52px; | |
| } | |
| .ml--13x, .mh--13x { | |
| margin-left: 52px; | |
| } | |
| .m--13x { | |
| margin: 52px; | |
| } | |
| .pt--13x, .pv--13x { | |
| padding-top: 52px; | |
| } | |
| .pr--13x, .ph--13x { | |
| padding-right: 52px; | |
| } | |
| .pb--13x, .pv--13x { | |
| padding-bottom: 52px; | |
| } | |
| .pl--13x, .ph--13x { | |
| padding-left: 52px; | |
| } | |
| .p--13x { | |
| padding: 52px; | |
| } | |
| .mt--14x, .mv--14x { | |
| margin-top: 56px; | |
| } | |
| .mr--14x, .mh--14x { | |
| margin-right: 56px; | |
| } | |
| .mb--14x, .mv--14x { | |
| margin-bottom: 56px; | |
| } | |
| .ml--14x, .mh--14x { | |
| margin-left: 56px; | |
| } | |
| .m--14x { | |
| margin: 56px; | |
| } | |
| .pt--14x, .pv--14x { | |
| padding-top: 56px; | |
| } | |
| .pr--14x, .ph--14x { | |
| padding-right: 56px; | |
| } | |
| .pb--14x, .pv--14x { | |
| padding-bottom: 56px; | |
| } | |
| .pl--14x, .ph--14x { | |
| padding-left: 56px; | |
| } | |
| .p--14x { | |
| padding: 56px; | |
| } | |
| .mt--15x, .mv--15x { | |
| margin-top: 60px; | |
| } | |
| .mr--15x, .mh--15x { | |
| margin-right: 60px; | |
| } | |
| .mb--15x, .mv--15x { | |
| margin-bottom: 60px; | |
| } | |
| .ml--15x, .mh--15x { | |
| margin-left: 60px; | |
| } | |
| .m--15x { | |
| margin: 60px; | |
| } | |
| .pt--15x, .pv--15x { | |
| padding-top: 60px; | |
| } | |
| .pr--15x, .ph--15x { | |
| padding-right: 60px; | |
| } | |
| .pb--15x, .pv--15x { | |
| padding-bottom: 60px; | |
| } | |
| .pl--15x, .ph--15x { | |
| padding-left: 60px; | |
| } | |
| .p--15x { | |
| padding: 60px; | |
| } | |
| .mt--16x, .mv--16x { | |
| margin-top: 64px; | |
| } | |
| .mr--16x, .mh--16x { | |
| margin-right: 64px; | |
| } | |
| .mb--16x, .mv--16x { | |
| margin-bottom: 64px; | |
| } | |
| .ml--16x, .mh--16x { | |
| margin-left: 64px; | |
| } | |
| .m--16x { | |
| margin: 64px; | |
| } | |
| .pt--16x, .pv--16x { | |
| padding-top: 64px; | |
| } | |
| .pr--16x, .ph--16x { | |
| padding-right: 64px; | |
| } | |
| .pb--16x, .pv--16x { | |
| padding-bottom: 64px; | |
| } | |
| .pl--16x, .ph--16x { | |
| padding-left: 64px; | |
| } | |
| .p--16x { | |
| padding: 64px; | |
| } | |
| .mt--17x, .mv--17x { | |
| margin-top: 68px; | |
| } | |
| .mr--17x, .mh--17x { | |
| margin-right: 68px; | |
| } | |
| .mb--17x, .mv--17x { | |
| margin-bottom: 68px; | |
| } | |
| .ml--17x, .mh--17x { | |
| margin-left: 68px; | |
| } | |
| .m--17x { | |
| margin: 68px; | |
| } | |
| .pt--17x, .pv--17x { | |
| padding-top: 68px; | |
| } | |
| .pr--17x, .ph--17x { | |
| padding-right: 68px; | |
| } | |
| .pb--17x, .pv--17x { | |
| padding-bottom: 68px; | |
| } | |
| .pl--17x, .ph--17x { | |
| padding-left: 68px; | |
| } | |
| .p--17x { | |
| padding: 68px; | |
| } | |
| .mt--18x, .mv--18x { | |
| margin-top: 72px; | |
| } | |
| .mr--18x, .mh--18x { | |
| margin-right: 72px; | |
| } | |
| .mb--18x, .mv--18x { | |
| margin-bottom: 72px; | |
| } | |
| .ml--18x, .mh--18x { | |
| margin-left: 72px; | |
| } | |
| .m--18x { | |
| margin: 72px; | |
| } | |
| .pt--18x, .pv--18x { | |
| padding-top: 72px; | |
| } | |
| .pr--18x, .ph--18x { | |
| padding-right: 72px; | |
| } | |
| .pb--18x, .pv--18x { | |
| padding-bottom: 72px; | |
| } | |
| .pl--18x, .ph--18x { | |
| padding-left: 72px; | |
| } | |
| .p--18x { | |
| padding: 72px; | |
| } | |
| .mt--19x, .mv--19x { | |
| margin-top: 76px; | |
| } | |
| .mr--19x, .mh--19x { | |
| margin-right: 76px; | |
| } | |
| .mb--19x, .mv--19x { | |
| margin-bottom: 76px; | |
| } | |
| .ml--19x, .mh--19x { | |
| margin-left: 76px; | |
| } | |
| .m--19x { | |
| margin: 76px; | |
| } | |
| .pt--19x, .pv--19x { | |
| padding-top: 76px; | |
| } | |
| .pr--19x, .ph--19x { | |
| padding-right: 76px; | |
| } | |
| .pb--19x, .pv--19x { | |
| padding-bottom: 76px; | |
| } | |
| .pl--19x, .ph--19x { | |
| padding-left: 76px; | |
| } | |
| .p--19x { | |
| padding: 76px; | |
| } | |
| .mt--20x, .mv--20x { | |
| margin-top: 80px; | |
| } | |
| .mr--20x, .mh--20x { | |
| margin-right: 80px; | |
| } | |
| .mb--20x, .mv--20x { | |
| margin-bottom: 80px; | |
| } | |
| .ml--20x, .mh--20x { | |
| margin-left: 80px; | |
| } | |
| .m--20x { | |
| margin: 80px; | |
| } | |
| .pt--20x, .pv--20x { | |
| padding-top: 80px; | |
| } | |
| .pr--20x, .ph--20x { | |
| padding-right: 80px; | |
| } | |
| .pb--20x, .pv--20x { | |
| padding-bottom: 80px; | |
| } | |
| .pl--20x, .ph--20x { | |
| padding-left: 80px; | |
| } | |
| .p--20x { | |
| padding: 80px; | |
| } | |
| .mt--21x, .mv--21x { | |
| margin-top: 84px; | |
| } | |
| .mr--21x, .mh--21x { | |
| margin-right: 84px; | |
| } | |
| .mb--21x, .mv--21x { | |
| margin-bottom: 84px; | |
| } | |
| .ml--21x, .mh--21x { | |
| margin-left: 84px; | |
| } | |
| .m--21x { | |
| margin: 84px; | |
| } | |
| .pt--21x, .pv--21x { | |
| padding-top: 84px; | |
| } | |
| .pr--21x, .ph--21x { | |
| padding-right: 84px; | |
| } | |
| .pb--21x, .pv--21x { | |
| padding-bottom: 84px; | |
| } | |
| .pl--21x, .ph--21x { | |
| padding-left: 84px; | |
| } | |
| .p--21x { | |
| padding: 84px; | |
| } | |
| .mt--22x, .mv--22x { | |
| margin-top: 88px; | |
| } | |
| .mr--22x, .mh--22x { | |
| margin-right: 88px; | |
| } | |
| .mb--22x, .mv--22x { | |
| margin-bottom: 88px; | |
| } | |
| .ml--22x, .mh--22x { | |
| margin-left: 88px; | |
| } | |
| .m--22x { | |
| margin: 88px; | |
| } | |
| .pt--22x, .pv--22x { | |
| padding-top: 88px; | |
| } | |
| .pr--22x, .ph--22x { | |
| padding-right: 88px; | |
| } | |
| .pb--22x, .pv--22x { | |
| padding-bottom: 88px; | |
| } | |
| .pl--22x, .ph--22x { | |
| padding-left: 88px; | |
| } | |
| .p--22x { | |
| padding: 88px; | |
| } | |
| .mt--23x, .mv--23x { | |
| margin-top: 92px; | |
| } | |
| .mr--23x, .mh--23x { | |
| margin-right: 92px; | |
| } | |
| .mb--23x, .mv--23x { | |
| margin-bottom: 92px; | |
| } | |
| .ml--23x, .mh--23x { | |
| margin-left: 92px; | |
| } | |
| .m--23x { | |
| margin: 92px; | |
| } | |
| .pt--23x, .pv--23x { | |
| padding-top: 92px; | |
| } | |
| .pr--23x, .ph--23x { | |
| padding-right: 92px; | |
| } | |
| .pb--23x, .pv--23x { | |
| padding-bottom: 92px; | |
| } | |
| .pl--23x, .ph--23x { | |
| padding-left: 92px; | |
| } | |
| .p--23x { | |
| padding: 92px; | |
| } | |
| .mt--24x, .mv--24x { | |
| margin-top: 96px; | |
| } | |
| .mr--24x, .mh--24x { | |
| margin-right: 96px; | |
| } | |
| .mb--24x, .mv--24x { | |
| margin-bottom: 96px; | |
| } | |
| .ml--24x, .mh--24x { | |
| margin-left: 96px; | |
| } | |
| .m--24x { | |
| margin: 96px; | |
| } | |
| .pt--24x, .pv--24x { | |
| padding-top: 96px; | |
| } | |
| .pr--24x, .ph--24x { | |
| padding-right: 96px; | |
| } | |
| .pb--24x, .pv--24x { | |
| padding-bottom: 96px; | |
| } | |
| .pl--24x, .ph--24x { | |
| padding-left: 96px; | |
| } | |
| .p--24x { | |
| padding: 96px; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment