archive-gh-me/tailwindcss
1
0
Fork 0
mirror of https://github.com/tailwindlabs/tailwindcss.git synced 2025-12-08 21:36:08 +00:00
Code Issues Projects Releases Wiki Activity

Merge pull request #38 from adamwathan/spacer-generators

Browse Source 
Extract spacer generators, use parameter instead of global var
This commit is contained in:
Jonathan Reinink 2017-08-03 09:30:16 -04:00 committed by GitHub
commit a45fa2b69a
3 changed files with 221 additions and 212 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/generators.less
View File

@ -28,3 +28,5 @@
@import "generators/text-colors";
@import "generators/text-weights";
@import "generators/text-sizes";
@import "generators/spacing";

206
src/generators/spacing.less Normal file
View File

@ -0,0 +1,206 @@
.generate-padding-utilities(@padding-scale; @i: 1) when (@i <= length(@padding-scale)) {
@spacer: extract(@padding-scale, @i);
@n: extract(@spacer, 1);
@size: extract(@spacer, 2);
.define-selector(~"pt-@{n}", { padding-top: @size; });
.define-selector(~"pr-@{n}", { padding-right: @size; });
.define-selector(~"pb-@{n}", { padding-bottom: @size; });
.define-selector(~"pl-@{n}", { padding-left: @size; });
.define-selector(~"py-@{n}", {
padding-top: @size;
padding-bottom: @size;
});
.define-selector(~"px-@{n}", {
padding-right: @size;
padding-left: @size;
});
.define-selector(~"p-@{n}", {
padding-top: @size;
padding-right: @size;
padding-bottom: @size;
padding-left: @size;
});
.generate-padding-utilities(@padding-scale; @i + 1);
}
.generate-screen-padding-utilities(@padding-scale; @screen; @screen-width; @i: 1) when (@i <= length(@padding-scale)) {
@prefix: ~"@{screen}\:";
@spacer: extract(@padding-scale, @i);
@n: extract(@spacer, 1);
@size: extract(@spacer, 2);
@media (min-width: @screen-width) {
.define-selector(~"@{prefix}pt-@{n}", { padding-top: @size; });
.define-selector(~"@{prefix}pr-@{n}", { padding-right: @size; });
.define-selector(~"@{prefix}pb-@{n}", { padding-bottom: @size; });
.define-selector(~"@{prefix}pl-@{n}", { padding-left: @size; });
.define-selector(~"@{prefix}py-@{n}", {
padding-top: @size;
padding-bottom: @size;
});
.define-selector(~"@{prefix}px-@{n}", {
padding-right: @size;
padding-left: @size;
});
.define-selector(~"@{prefix}p-@{n}", {
padding-top: @size;
padding-right: @size;
padding-bottom: @size;
padding-left: @size;
});
}
.generate-screen-padding-utilities(@padding-scale; @screen; @screen-width; (@i + 1));
}
.generate-responsive-padding-utilities(@padding-scale; @i: 1) when (@i <= length(@screens)) {
@screen: extract(@screens, @i);
@name: extract(@screen, 1);
@screen-width: extract(@screen, 2);
.generate-screen-padding-utilities(@padding-scale; @name; @screen-width);
.generate-responsive-padding-utilities(@padding-scale; @i + 1);
}
.generate-margin-utilities(@margin-scale; @i: 1) when (@i <= length(@margin-scale)) {
@spacer: extract(@margin-scale, @i);
@n: extract(@spacer, 1);
@size: extract(@spacer, 2);
.define-selector(~"mt-@{n}", { margin-top: @size; });
.define-selector(~"mr-@{n}", { margin-right: @size; });
.define-selector(~"mb-@{n}", { margin-bottom: @size; });
.define-selector(~"ml-@{n}", { margin-left: @size; });
.define-selector(~"my-@{n}", {
margin-top: @size;
margin-bottom: @size;
});
.define-selector(~"mx-@{n}", {
margin-right: @size;
margin-left: @size;
});
.define-selector(~"m-@{n}", {
margin-top: @size;
margin-right: @size;
margin-bottom: @size;
margin-left: @size;
});
.generate-margin-utilities(@margin-scale; @i + 1);
}
.generate-screen-margin-utilities(@margin-scale; @screen; @screen-width; @i: 1) when (@i <= length(@margin-scale)) {
@prefix: ~"@{screen}\:";
@spacer: extract(@margin-scale, @i);
@n: extract(@spacer, 1);
@size: extract(@spacer, 2);
@media (min-width: @screen-width) {
.define-selector(~"@{prefix}mt-@{n}", { margin-top: @size; });
.define-selector(~"@{prefix}mr-@{n}", { margin-right: @size; });
.define-selector(~"@{prefix}mb-@{n}", { margin-bottom: @size; });
.define-selector(~"@{prefix}ml-@{n}", { margin-left: @size; });
.define-selector(~"@{prefix}my-@{n}", {
margin-top: @size;
margin-bottom: @size;
});
.define-selector(~"@{prefix}mx-@{n}", {
margin-right: @size;
margin-left: @size;
});
.define-selector(~"@{prefix}m-@{n}", {
margin-top: @size;
margin-right: @size;
margin-bottom: @size;
margin-left: @size;
});
}
.generate-screen-margin-utilities(@margin-scale; @screen; @screen-width; (@i + 1));
}
.generate-responsive-margin-utilities(@margin-scale; @i: 1) when (@i <= length(@screens)) {
@screen: extract(@screens, @i);
@name: extract(@screen, 1);
@screen-width: extract(@screen, 2);
.generate-screen-margin-utilities(@margin-scale; @name; @screen-width);
@media (min-width: @screen-width) {
@prefix: ~"@{name}\:";
.@{prefix}mx-auto { margin-left: auto; margin-right: auto; }
}
.generate-responsive-margin-utilities(@margin-scale; @i + 1);
}
.generate-pull-utilities(@pull-scale; @i: 1) when (@i <= length(@pull-scale)) {
@spacer: extract(@pull-scale, @i);
@n: extract(@spacer, 1);
@size: extract(@spacer, 2);
.define-selector(~"pull-t-@{n}", { margin-top: ~"-@{size}"; });
.define-selector(~"pull-r-@{n}", { margin-right: ~"-@{size}"; });
.define-selector(~"pull-b-@{n}", { margin-bottom: ~"-@{size}"; });
.define-selector(~"pull-l-@{n}", { margin-left: ~"-@{size}"; });
.define-selector(~"pull-y-@{n}", {
margin-top: ~"-@{size}";
margin-bottom: ~"-@{size}";
});
.define-selector(~"pull-x-@{n}", {
margin-right: ~"-@{size}";
margin-left: ~"-@{size}";
});
.define-selector(~"pull-@{n}", {
margin-top: ~"-@{size}";
margin-right: ~"-@{size}";
margin-bottom: ~"-@{size}";
margin-left: ~"-@{size}";
});
.generate-pull-utilities(@pull-scale; @i + 1);
}
.generate-screen-pull-utilities(@pull-scale; @screen; @screen-width; @i: 1) when (@i <= length(@pull-scale)) {
@prefix: ~"@{screen}\:";
@spacer: extract(@pull-scale, @i);
@n: extract(@spacer, 1);
@size: extract(@spacer, 2);
@media (min-width: @screen-width) {
.define-selector(~"@{prefix}pull-t-@{n}", { margin-top: ~"-@{size}"; });
.define-selector(~"@{prefix}pull-r-@{n}", { margin-right: ~"-@{size}"; });
.define-selector(~"@{prefix}pull-b-@{n}", { margin-bottom: ~"-@{size}"; });
.define-selector(~"@{prefix}pull-l-@{n}", { margin-left: ~"-@{size}"; });
.define-selector(~"@{prefix}pull-y-@{n}", {
margin-top: ~"-@{size}";
margin-bottom: ~"-@{size}";
});
.define-selector(~"@{prefix}pull-x-@{n}", {
margin-right: ~"-@{size}";
margin-left: ~"-@{size}";
});
.define-selector(~"@{prefix}pull-@{n}", {
margin-top: ~"-@{size}";
margin-right: ~"-@{size}";
margin-bottom: ~"-@{size}";
margin-left: ~"-@{size}";
});
}
.generate-screen-pull-utilities(@pull-scale; @screen; @screen-width; (@i + 1));
}
.generate-responsive-pull-utilities(@pull-scale; @i: 1) when (@i <= length(@screens)) {
@screen: extract(@screens, @i);
@name: extract(@screen, 1);
@screen-width: extract(@screen, 2);
.generate-screen-pull-utilities(@pull-scale; @name; @screen-width);
.generate-responsive-pull-utilities(@pull-scale; @i + 1);
}

225
src/utilities/spacing.less
View File

@ -34,218 +34,19 @@
'14' @spacer-14,
'15' @spacer-15;
.generate-padding-utilities(@i: 1) when (@i <= length(@spacer-map)) {
@spacer: extract(@spacer-map, @i);
@spacing-scale: @spacer-map;
@padding-scale: @spacing-scale;
@margin-scale: @spacing-scale;
@pull-scale: @spacing-scale;
@n: extract(@spacer, 1);
@size: extract(@spacer, 2);
.define-selector(~"pt-@{n}", { padding-top: @size; });
.define-selector(~"pr-@{n}", { padding-right: @size; });
.define-selector(~"pb-@{n}", { padding-bottom: @size; });
.define-selector(~"pl-@{n}", { padding-left: @size; });
.define-selector(~"py-@{n}", {
padding-top: @size;
padding-bottom: @size;
});
.define-selector(~"px-@{n}", {
padding-right: @size;
padding-left: @size;
});
.define-selector(~"p-@{n}", {
padding-top: @size;
padding-right: @size;
padding-bottom: @size;
padding-left: @size;
});
.generate-padding-utilities(@i + 1);
}
.generate-screen-padding-utilities(@screen; @screen-width; @i: 1) when (@i <= length(@spacer-map)) {
@prefix: ~"@{screen}\:";
@spacer: extract(@spacer-map, @i);
@n: extract(@spacer, 1);
@size: extract(@spacer, 2);
@media (min-width: @screen-width) {
.define-selector(~"@{prefix}pt-@{n}", { padding-top: @size; });
.define-selector(~"@{prefix}pr-@{n}", { padding-right: @size; });
.define-selector(~"@{prefix}pb-@{n}", { padding-bottom: @size; });
.define-selector(~"@{prefix}pl-@{n}", { padding-left: @size; });
.define-selector(~"@{prefix}py-@{n}", {
padding-top: @size;
padding-bottom: @size;
});
.define-selector(~"@{prefix}px-@{n}", {
padding-right: @size;
padding-left: @size;
});
.define-selector(~"@{prefix}p-@{n}", {
padding-top: @size;
padding-right: @size;
padding-bottom: @size;
padding-left: @size;
});
}
.generate-screen-padding-utilities(@screen; @screen-width; (@i + 1));
}
.generate-responsive-padding-utilities(@i: 1) when (@i <= length(@screens)) {
@screen: extract(@screens, @i);
@name: extract(@screen, 1);
@screen-width: extract(@screen, 2);
.generate-screen-padding-utilities(@name, @screen-width);
.generate-responsive-padding-utilities(@i + 1);
}
.generate-margin-utilities(@i: 1) when (@i <= length(@spacer-map)) {
@spacer: extract(@spacer-map, @i);
@n: extract(@spacer, 1);
@size: extract(@spacer, 2);
.define-selector(~"mt-@{n}", { margin-top: @size; });
.define-selector(~"mr-@{n}", { margin-right: @size; });
.define-selector(~"mb-@{n}", { margin-bottom: @size; });
.define-selector(~"ml-@{n}", { margin-left: @size; });
.define-selector(~"my-@{n}", {
margin-top: @size;
margin-bottom: @size;
});
.define-selector(~"mx-@{n}", {
margin-right: @size;
margin-left: @size;
});
.define-selector(~"m-@{n}", {
margin-top: @size;
margin-right: @size;
margin-bottom: @size;
margin-left: @size;
});
.generate-margin-utilities(@i + 1);
}
.generate-screen-margin-utilities(@screen; @screen-width; @i: 1) when (@i <= length(@spacer-map)) {
@prefix: ~"@{screen}\:";
@spacer: extract(@spacer-map, @i);
@n: extract(@spacer, 1);
@size: extract(@spacer, 2);
@media (min-width: @screen-width) {
.define-selector(~"@{prefix}mt-@{n}", { margin-top: @size; });
.define-selector(~"@{prefix}mr-@{n}", { margin-right: @size; });
.define-selector(~"@{prefix}mb-@{n}", { margin-bottom: @size; });
.define-selector(~"@{prefix}ml-@{n}", { margin-left: @size; });
.define-selector(~"@{prefix}my-@{n}", {
margin-top: @size;
margin-bottom: @size;
});
.define-selector(~"@{prefix}mx-@{n}", {
margin-right: @size;
margin-left: @size;
});
.define-selector(~"@{prefix}m-@{n}", {
margin-top: @size;
margin-right: @size;
margin-bottom: @size;
margin-left: @size;
});
}
.generate-screen-margin-utilities(@screen; @screen-width; (@i + 1));
}
.generate-responsive-margin-utilities(@i: 1) when (@i <= length(@screens)) {
@screen: extract(@screens, @i);
@name: extract(@screen, 1);
@screen-width: extract(@screen, 2);
.generate-screen-margin-utilities(@name, @screen-width);
@media (min-width: @screen-width) {
@prefix: ~"@{name}\:";
.@{prefix}mx-auto { margin-left: auto; margin-right: auto; }
}
.generate-responsive-margin-utilities(@i + 1);
}
.generate-pull-utilities(@i: 1) when (@i <= length(@spacer-map)) {
@spacer: extract(@spacer-map, @i);
@n: extract(@spacer, 1);
@size: extract(@spacer, 2);
.define-selector(~"pull-t-@{n}", { margin-top: ~"-@{size}"; });
.define-selector(~"pull-r-@{n}", { margin-right: ~"-@{size}"; });
.define-selector(~"pull-b-@{n}", { margin-bottom: ~"-@{size}"; });
.define-selector(~"pull-l-@{n}", { margin-left: ~"-@{size}"; });
.define-selector(~"pull-y-@{n}", {
margin-top: ~"-@{size}";
margin-bottom: ~"-@{size}";
});
.define-selector(~"pull-x-@{n}", {
margin-right: ~"-@{size}";
margin-left: ~"-@{size}";
});
.define-selector(~"pull-@{n}", {
margin-top: ~"-@{size}";
margin-right: ~"-@{size}";
margin-bottom: ~"-@{size}";
margin-left: ~"-@{size}";
});
.generate-pull-utilities(@i + 1);
}
.generate-screen-pull-utilities(@screen; @screen-width; @i: 1) when (@i <= length(@spacer-map)) {
@prefix: ~"@{screen}\:";
@spacer: extract(@spacer-map, @i);
@n: extract(@spacer, 1);
@size: extract(@spacer, 2);
@media (min-width: @screen-width) {
.define-selector(~"@{prefix}pull-t-@{n}", { margin-top: ~"-@{size}"; });
.define-selector(~"@{prefix}pull-r-@{n}", { margin-right: ~"-@{size}"; });
.define-selector(~"@{prefix}pull-b-@{n}", { margin-bottom: ~"-@{size}"; });
.define-selector(~"@{prefix}pull-l-@{n}", { margin-left: ~"-@{size}"; });
.define-selector(~"@{prefix}pull-y-@{n}", {
margin-top: ~"-@{size}";
margin-bottom: ~"-@{size}";
});
.define-selector(~"@{prefix}pull-x-@{n}", {
margin-right: ~"-@{size}";
margin-left: ~"-@{size}";
});
.define-selector(~"@{prefix}pull-@{n}", {
margin-top: ~"-@{size}";
margin-right: ~"-@{size}";
margin-bottom: ~"-@{size}";
margin-left: ~"-@{size}";
});
}
.generate-screen-pull-utilities(@screen; @screen-width; (@i + 1));
}
.generate-responsive-pull-utilities(@i: 1) when (@i <= length(@screens)) {
@screen: extract(@screens, @i);
@name: extract(@screen, 1);
@screen-width: extract(@screen, 2);
.generate-screen-pull-utilities(@name, @screen-width);
.generate-responsive-pull-utilities(@i + 1);
}
.generate-padding-utilities();
.generate-margin-utilities();
.generate-pull-utilities();
.generate-padding-utilities(@padding-scale);
.generate-margin-utilities(@margin-scale);
.generate-pull-utilities(@pull-scale);
.mx-auto { margin-left: auto; margin-right: auto; }
.generate-responsive-padding-utilities();
.generate-responsive-margin-utilities();
.generate-responsive-pull-utilities();
.generate-responsive-padding-utilities(@padding-scale);
.generate-responsive-margin-utilities(@margin-scale);
.generate-responsive-pull-utilities(@pull-scale);
.responsive({
&mx-auto { .mx-auto; }
});