In my project I use 4 color themes and with this function I want to automatically assign the specific colors values contained in the variable and I want also to use the name of the variable to assign it to the class.
// the variables
@peach: 3399cc;
@green: ff00CC;
@orange: FF0033;
@yellow: EE0033;
@list: @peach, @green, @orange, @yellow;
// my LESS function
It generates the class name with the variable value: ex: bsq3399cc I would like the class name to be the same as variable name: ex bsq-peach
I'm using .for function as documented here. https://github.com/seven-phases-max/less.curious/blob/master/articles/for-each.md
.bsq {
.for(@list); .-each(@name) {
&@{name} {
@color: color("#@{name}");
li& { background: @color; }
li& strong { background:lighten(@color, 10%); }
li& i { background:lighten(@color, 20%); }
}
}
}
the .for mixin //
// ............................................................
// .for
.for(@i, @n) {.-each(@i)}
.for(@n) when (isnumber(@n)) {.for(1, @n)}
.for(@i, @n) when not (@i = @n) {
.for((@i + (@n - @i) / abs(@n - @i)), @n);
}
// ............................................................
// .for-each
.for(@array) when (default()) {.for-impl_(length(@array))}
.for-impl_(@i) when (@i > 1) {.for-impl_((@i - 1))}
.for-impl_(@i) when (@i > 0) {.-each(extract(@array, @i))}
The HTML code i use is here.
<ul class="testing">
<li class="bsq3399cc"><strong>1</strong><i>10</i></li>
<li class="bsqff00CC"><strong>2</strong><i>20</i></li>
<li class="bsqFF0033"><strong>3</strong><i>30</i></li>
<li class="bsqEE0033"><strong>4</strong><i>40</i></li>
</ul>
Well, your mistake in the snippet is that you actually do not provide those "names" for the classes (i.e. peach
, green
, orange
, yellow
) but only hex color values.
Note that in:
// the variables
@peach: 3399cc;
@green: ff00CC;
@orange: FF0033;
@yellow: EE0033;
@list: @peach, @green, @orange, @yellow;
The @list
is equal to 3399cc, ff00CC, FF0033, EE0033
.
I guess what you really meant is something like this:
@peach: #3399cc;
@green: #ff00CC;
@orange: #FF0033;
@yellow: #EE0033;
@list: 'peach', 'green', 'orange', 'yellow';
li.bsq- {
.for(@list); .-each(@name) {
@name_: e(@name);
@color: @@name;
&@{name_} {
background: @color;
strong {background: lighten(@color, 10%)}
i {background: lighten(@color, 20%)}
}
}
}
---
Additionally I would also get rid of @green
/'green'
duplication unless you really need those distinct variables elsewhere: see for example Loop over an array of name value pairs in LESS and the last example in https://stackoverflow.com/a/25877100 (just opposite methods for the same approach).