Я ведь сделал это, всего-то сутки на это потребовались..
нужно сделать два миксина:
if.less:
.if(...) {}
.if(@condition, @callback...) when (@condition) {
@callback();
.then();
}
.if(@condition, @callback...) when not(@condition) {
.else(...){};
@callback();
@one: extract(@condition, 1);
@two: extract(@condition, 3);
@operator: extract(@condition, 2);
.return(lt) {
& when (@one < @two) {
.if(true, @callback);
}
& when not (@one < @two) {
.else();
}
}
.return(lte) {
& when (@one <= @two) {
.if(true, @callback);
}
& when not(@one <= @two) {
.else();
}
}
.return(gt) {
& when (@one > @two) {
.if(true, @callback);
}
& when not(@one > @two) {
.else();
}
}
.return(gte) {
& when (@one >= @two) {
.if(true, @callback);
}
& when not(@one >= @two) {
.else();
}
}
.return(eq) {
& when (@one = @two) {
.if(true, @callback);
}
& when not(@one = @two) {
.else();
}
}
.return(neq) {
& when not(@one = @two) {
.if(true, @callback);
}
& when (@one = @two) {
.else();
}
}
.return(...) when (default()) {
.else();
}
.return(@operator);
}
each.less:
.each(@list, @callback) when (default()) {
.return(@i, @callback) when (@i > 1) {
.return((@i - 1), @callback)
}
.return(@i, @callback) {
.callback(...) when (default()) {};
@callback();
.callback(extract(@list, @i), @i);
}
.return(length(@list), @callback);
}
а вот так будет выглядеть основной код:
@import "each";
@import "if";
@red:
"lighten-5": #FFEBEE,
"lighten-4": #FFCDD2,
"base": #F44336;
@pink:
"lighten-5": #fce4ec,
"lighten-4": #f8bbd0,
"base": #e91e63;
@colors:
"red": $red,
"pink": $pink;
.each(@colors, {.callback(@color, @index) {
@main_color: extract(@color, 1);
@color_type: extract(@color, 1);
@color_value: extract(@color, 2);
.each(@color_value, { .callback(@color2, @index) {
@color_type2: extract(@color2, 1);
@color_value2: extract(@color2, 2);
.if(@color_type2 eq base, {
.then(){
.@{main_color} {
background-color: @color_value2 !important;
}
.@{main_color}-text {
color: @color_value2 !important;
}
}
.else(){
.@{main_color} {
&.@{color_type2} {
background-color: @color_value2 !important;
}
&.@{color_type2}-text {
color: @color_value2 !important;
}
}
}
});
}});
}});
