Get url url from class name

Question

I need to use a lot of images (> 600) in the current project (application). The way I want to manage them, since I have almost no PHP / SQL experience, is in css / less.css.

I created a stylesheet called "faces.less" to manage them. My current sheet is as follows:

.f01 { background-image: url("{base-url}/f01.png"); } 

Width, height, etc. managed in another class. But for this, 600+ times seems silly, is there a (simple) way in LESS or jQuery to load the image name from the class name? My ideal solution would look something like this:

 .f01, .f02, .f03 { background-image: url("@{base-url}/{class-name}+png"); 

Any solution is welcome!

Answer 1

Using LESS 1.3.1 +

It was a little difficult to get a leading 0 from a number less than 10 to work correctly with a recursive loop, but he succeeded:

LESS

 @base-url: "/blah/blah"; @max-faces: 600; //enter the maximum number of faces to generate code for .buildFaces(@index, @pre: ~"f0") when (@index =< @max-faces) { //build classes .@ {pre}@{index} { background-image: url("@{base-url}/@{pre}@{index}.png"); } //loop .buildFaces((@index + 1), ~`(@{index} + 1) < 10 ? "f0" : "f"`); } // end loop .buildFaces(@index, @pre) when (@index > @max-faces) {} // start loop .buildFaces(1); 

CSS Result (Aborted)

 .f01 { background-image: url("/blah/blah/f01.png"); } .f02 { background-image: url("/blah/blah/f02.png"); } ... .f599 { background-image: url("/blah/blah/f599.png"); } .f600 { background-image: url("/blah/blah/f600.png"); } 

Answer 2

To create an image name from a class name using image tags (I'm not sure if the best way with a background image):

 var basePath = 'mysite/images/'; $('a').each(function() { var className = $(this).attr('class'); className = className.replace(/[^f][^0-9]*/, '').replace(' ', ''); $(this).css('background-image', basePath + className + '.png'); });