Rename define-selector to define-class, extract to file

This commit is contained in:
Adam Wathan 2017-08-04 09:17:22 -04:00
parent 8b312408d7
commit d7a0db958f
5 changed files with 70 additions and 73 deletions

View File

@ -1,35 +1,11 @@
.define-selector(@class, @ruleset) {
.@{class} {
@ruleset();
}
}
.apply-match(@map; @search; @ruleset) {
@current: extract(extract(@map, 1), 1);
.apply-match(@map; @search; @current; @ruleset; 1);
}
.apply-match(@map; @search; @current; @ruleset; @i) when not (@search = @current) and (@i <= length(@map)) {
@current: extract(extract(@map, @i + 1), 1);
.apply-match(@map; @search; @current; @ruleset; @i + 1);
}
.apply-match(@map; @search; @current; @ruleset; @i) when (@search = @current) and (@i <= length(@map)) {
& {
@__match: extract(extract(@map, @i), 2);
@ruleset();
}
}
@import "generators/_helpers";
@import "generators/_matching";
@import "generators/_utility-variants";
@import "generators/backgrounds";
@import "generators/border-colors";
@import "generators/constrain";
@import "generators/text-colors";
@import "generators/text-weights";
@import "generators/text-sizes";
@import "generators/spacing";

View File

@ -0,0 +1,5 @@
.define-class(@class, @ruleset) {
.@{class} {
@ruleset();
}
}

View File

@ -0,0 +1,16 @@
.apply-match(@map; @search; @ruleset) {
@current: extract(extract(@map, 1), 1);
.apply-match(@map; @search; @current; @ruleset; 1);
}
.apply-match(@map; @search; @current; @ruleset; @i) when not (@search = @current) and (@i <= length(@map)) {
@current: extract(extract(@map, @i + 1), 1);
.apply-match(@map; @search; @current; @ruleset; @i + 1);
}
.apply-match(@map; @search; @current; @ruleset; @i) when (@search = @current) and (@i <= length(@map)) {
& {
@__match: extract(extract(@map, @i), 2);
@ruleset();
}
}

View File

@ -1,12 +1,12 @@
.generate-utility-variant(@utility; @variant; @ruleset) when (extract(@variant, 1) = default) {
@__variant-value: @variant;
.define-selector(~"@{utility}"; @ruleset);
.define-class(~"@{utility}"; @ruleset);
}
.generate-utility-variant(@utility; @variant; @ruleset) when not (extract(@variant, 1) = default) {
@variant-name: extract(@variant, 1);
@__variant-value: @variant;
.define-selector(~"@{utility}-@{variant-name}"; @ruleset);
.define-class(~"@{utility}-@{variant-name}"; @ruleset);
}
.generate-utility-variants(@utility; @variants; @ruleset; @i: 1) when (@i <= length(@variants)) and (length(extract(@variants, @i)) = 1) {
@ -25,13 +25,13 @@
.generate-screen-utility-variant(@utility; @variant; @screen-name; @ruleset) when (extract(@variant, 1) = default) {
@__variant-value: @variant;
.define-selector(~"@{screen-name}\:@{utility}"; @ruleset);
.define-class(~"@{screen-name}\:@{utility}"; @ruleset);
}
.generate-screen-utility-variant(@utility; @variant; @screen-name; @ruleset) when not (extract(@variant, 1) = default) {
@variant-name: extract(@variant, 1);
@__variant-value: @variant;
.define-selector(~"@{screen-name}\:@{utility}-@{variant-name}"; @ruleset);
.define-class(~"@{screen-name}\:@{utility}-@{variant-name}"; @ruleset);
}
.generate-screen-utility-variants(@utility; @variants; @screen-name; @ruleset; @i: 1) when (@i <= length(@variants)) and (length(extract(@variants, @i)) = 1) {

View File

@ -4,19 +4,19 @@
@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}", {
.define-class(~"pt-@{n}", { padding-top: @size; });
.define-class(~"pr-@{n}", { padding-right: @size; });
.define-class(~"pb-@{n}", { padding-bottom: @size; });
.define-class(~"pl-@{n}", { padding-left: @size; });
.define-class(~"py-@{n}", {
padding-top: @size;
padding-bottom: @size;
});
.define-selector(~"px-@{n}", {
.define-class(~"px-@{n}", {
padding-right: @size;
padding-left: @size;
});
.define-selector(~"p-@{n}", {
.define-class(~"p-@{n}", {
padding-top: @size;
padding-right: @size;
padding-bottom: @size;
@ -33,19 +33,19 @@
@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}", {
.define-class(~"@{prefix}pt-@{n}", { padding-top: @size; });
.define-class(~"@{prefix}pr-@{n}", { padding-right: @size; });
.define-class(~"@{prefix}pb-@{n}", { padding-bottom: @size; });
.define-class(~"@{prefix}pl-@{n}", { padding-left: @size; });
.define-class(~"@{prefix}py-@{n}", {
padding-top: @size;
padding-bottom: @size;
});
.define-selector(~"@{prefix}px-@{n}", {
.define-class(~"@{prefix}px-@{n}", {
padding-right: @size;
padding-left: @size;
});
.define-selector(~"@{prefix}p-@{n}", {
.define-class(~"@{prefix}p-@{n}", {
padding-top: @size;
padding-right: @size;
padding-bottom: @size;
@ -71,19 +71,19 @@
@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}", {
.define-class(~"mt-@{n}", { margin-top: @size; });
.define-class(~"mr-@{n}", { margin-right: @size; });
.define-class(~"mb-@{n}", { margin-bottom: @size; });
.define-class(~"ml-@{n}", { margin-left: @size; });
.define-class(~"my-@{n}", {
margin-top: @size;
margin-bottom: @size;
});
.define-selector(~"mx-@{n}", {
.define-class(~"mx-@{n}", {
margin-right: @size;
margin-left: @size;
});
.define-selector(~"m-@{n}", {
.define-class(~"m-@{n}", {
margin-top: @size;
margin-right: @size;
margin-bottom: @size;
@ -100,19 +100,19 @@
@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}", {
.define-class(~"@{prefix}mt-@{n}", { margin-top: @size; });
.define-class(~"@{prefix}mr-@{n}", { margin-right: @size; });
.define-class(~"@{prefix}mb-@{n}", { margin-bottom: @size; });
.define-class(~"@{prefix}ml-@{n}", { margin-left: @size; });
.define-class(~"@{prefix}my-@{n}", {
margin-top: @size;
margin-bottom: @size;
});
.define-selector(~"@{prefix}mx-@{n}", {
.define-class(~"@{prefix}mx-@{n}", {
margin-right: @size;
margin-left: @size;
});
.define-selector(~"@{prefix}m-@{n}", {
.define-class(~"@{prefix}m-@{n}", {
margin-top: @size;
margin-right: @size;
margin-bottom: @size;
@ -144,19 +144,19 @@
@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}", {
.define-class(~"pull-t-@{n}", { margin-top: ~"-@{size}"; });
.define-class(~"pull-r-@{n}", { margin-right: ~"-@{size}"; });
.define-class(~"pull-b-@{n}", { margin-bottom: ~"-@{size}"; });
.define-class(~"pull-l-@{n}", { margin-left: ~"-@{size}"; });
.define-class(~"pull-y-@{n}", {
margin-top: ~"-@{size}";
margin-bottom: ~"-@{size}";
});
.define-selector(~"pull-x-@{n}", {
.define-class(~"pull-x-@{n}", {
margin-right: ~"-@{size}";
margin-left: ~"-@{size}";
});
.define-selector(~"pull-@{n}", {
.define-class(~"pull-@{n}", {
margin-top: ~"-@{size}";
margin-right: ~"-@{size}";
margin-bottom: ~"-@{size}";
@ -173,19 +173,19 @@
@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}", {
.define-class(~"@{prefix}pull-t-@{n}", { margin-top: ~"-@{size}"; });
.define-class(~"@{prefix}pull-r-@{n}", { margin-right: ~"-@{size}"; });
.define-class(~"@{prefix}pull-b-@{n}", { margin-bottom: ~"-@{size}"; });
.define-class(~"@{prefix}pull-l-@{n}", { margin-left: ~"-@{size}"; });
.define-class(~"@{prefix}pull-y-@{n}", {
margin-top: ~"-@{size}";
margin-bottom: ~"-@{size}";
});
.define-selector(~"@{prefix}pull-x-@{n}", {
.define-class(~"@{prefix}pull-x-@{n}", {
margin-right: ~"-@{size}";
margin-left: ~"-@{size}";
});
.define-selector(~"@{prefix}pull-@{n}", {
.define-class(~"@{prefix}pull-@{n}", {
margin-top: ~"-@{size}";
margin-right: ~"-@{size}";
margin-bottom: ~"-@{size}";