CODEWITHSUNDEEP
csslesslesscss-resources
nedzen
nedzen

Reputation: 13

How can I possibly make this LESSCSS loop work correctly?

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>

Upvotes: 1

Views: 98

Answers (1)

seven-phases-max
seven-phases-max

Reputation: 11820

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).

Upvotes: 1

Related Questions