CODEWITHSUNDEEP
htmlcssvariableslessmixins
JackofAll
JackofAll

Reputation: 537

Incremental file name using less css

I am trying to create 50 background images for a set of windows using less.

These image paths are exactly the same format, but the number just increments by 1 for each window.

Currently I have the following code:

window-1{
 background-image: url('/content/images/background-1-window.png')
}

window-2{
 background-image: url('/content/images/background-2-window.png')
}
..
window-50{
 background-image: url('/content/images/background-50-window.png')
}

What I want to achieve is to effectively have variables replacing the numbers using less, is it possible to do this using variables and or mixins?

Something like:

window-@window-number{
 Background-image: url('/content/images/[email protected]')
}

Is it at all possible to do something like this?

Upvotes: 0

Views: 211

Answers (1)

Bass Jobsen
Bass Jobsen

Reputation: 49054

Yes, it is possible, see this answer https://stackoverflow.com/a/15982103/1596547 and https://github.com/twbs/bootstrap/issues/10990 for some example code:

In your case:

.setbackgroundimage(@index) when (@index > 0)
{
    window-@{index}
    {
     background-image: url('/content/images/background-@{index}-window.png');
    }
    .setbackgroundimage(@index - 1);
}

.setbackgroundimage(50);

Upvotes: 1

Related Questions