Looping through named variables with LESS

Question

I have a series of colors that represent different topics. One of the themes I use is that the color of an element represents what topics it covers and elements can refer to up to two topics. If an element uses two topics, its background uses a gradient instead of a flat color. For example:

@literatureColor: red;
@mathColor: blue;
.literature{
    background-color: @literatureColor;
}
.math{
    background-color: @mathColor;
}
.literature-math{
    background: linear-gradient(to right, @literatureColor 0%, @mathColor 100%);
}

I want to be able to generate .literature-math dynamically with a loop if possible (using JS at the moment) since I have 20 topics that can be covered. Is this possible with LESS loops? From what I see in their looping example, only the looping variable can be referenced and I would need to be able to dynamically generate the class names.

>"From what I see in their looping example, only the looping variable can be referenced" - not quite. Actually you can create a list of literally *anything* and loop through these anythings. See for example http://stackoverflow.com/questions/23658087. — seven-phases-max, Apr 05 '15 at 01:52
Actually this all depends on whether you need these global variables at all (to use elsewhere) or not. If not, you don't even need an explicit loop ([example](http://stackoverflow.com/a/26435364)). There're probably hundreds of different Less loop examples here so I guess you'll easily find one to fit your use-case better. — seven-phases-max, Apr 05 '15 at 01:58

Bass Jobsen · Accepted Answer · 2015-04-05T12:12:59.673

As far as i do understand your question you will need some kind of "cross product". You will need two loops to create your classes and also will need variables with variable names.

Example:

@literatureColor: red;
@mathColor: blue;
@geographyColor: yellow;
@computationalscienceColor: orange;

@classes: literature,math,geography,computationalscience;


.outsideloop(@classes; @iterator: 1) {
    @pre: extract(@classes,@iterator); 

    .insideloop(@pre,@classes,@iterator);

    & when (@iterator < length(@classes)) {
        .outsideloop(@classes,@iterator + 1);
    }
}

.insideloop(@pre,@classes,@preiterator,@iterator: 1) {
    @post: extract(@classes,@iterator);

    & when not (@pre = @post) {
        @precolor: "@{pre}Color";
        @postcolor: "@{post}Color";
        @{pre}-@{post} { 
            background: linear-gradient(to right, @@precolor 0%, @@postcolor 100%); 
        }
    }

    & when (@iterator < length(@classes)) {
        .insideloop(@pre,@classes,@preiterator,@iterator + 1);
    }
}

.outsideloop(@classes);

The preceding Less code will compile into CSS code as follows:

literature-math {
  background: linear-gradient(to right, red 0%, blue 100%);
}
literature-geography {
  background: linear-gradient(to right, red 0%, yellow 100%);
}
literature-computationalscience {
  background: linear-gradient(to right, red 0%, orange 100%);
}
math-literature {
  background: linear-gradient(to right, blue 0%, red 100%);
}
math-geography {
  background: linear-gradient(to right, blue 0%, yellow 100%);
}
math-computationalscience {
  background: linear-gradient(to right, blue 0%, orange 100%);
}
geography-literature {
  background: linear-gradient(to right, yellow 0%, red 100%);
}
geography-math {
  background: linear-gradient(to right, yellow 0%, blue 100%);
}
geography-computationalscience {
  background: linear-gradient(to right, yellow 0%, orange 100%);
}
computationalscience-literature {
  background: linear-gradient(to right, orange 0%, red 100%);
}
computationalscience-math {
  background: linear-gradient(to right, orange 0%, blue 100%);
}
computationalscience-geography {
  background: linear-gradient(to right, orange 0%, yellow 100%);
}

Looping through named variables with LESS

1 Answers1