Matthieu Chetelat Matthieu Chetelat - 27 days ago 8
Less Question

less function to generate css class

I try to do any less function which will be called to create some classes.
Here is the way I tried :

.makeCssColor{@couleur) {
.coul_@{couleur} {
background-color: fade(~"@{couleur}, 'Fonce'", 15%);

&.open, &:hover {
background-color: ~"@{couleur}, 'Fonce'";
}
.btMod {
background : url('/img/btModEvt_@{couleur}.png') left top no-repeat transparent;
}
}
}


And I try to call it to create the classes :

.makeCssColor("bleu");
.makeCssColor("rouge");


But it generate an error. I don't find the good way to do it... And it bothers me to repeat all these code for each color (there is more than these line code and more thant two colors !).
Can anyone give me a little help ? :)

[edit]

ok, thanks to your help, this code does not generate an error, but there is a mistake in the CSS file :

@marronFonce = #9d5a1e;

.makeCssColor(@couleur) {
.coul_@{couleur} {
.top {
background-color: @couleur, 'Fonce';
}
.mod {
background : url('/img/btModEvt_@{couleur}.png') left top no-repeat transparent;
}
}
}

.makeCssColor(marron);


Generate this into the css file :

.coul_marron .top{background-color:marron,'Fonce'}
.coul_marron background : url('/img/btModEvt_marron.png') left top no-repeat transparent;


So the background color isn't good :

.coul_marron .top{background-color:#9d5a1e}
.coul_marron background : url('/img/btModEvt_marron.png') left top no-repeat transparent;


I need to evaluate @couleur, 'Fonce' : @marronFonce => #9d5a1e.
I tried @{@couleur, 'Fonce'} but it doesn't works...

Answer Source

Fade function takes a colour and a fade percentage, in your case you are passing 2 colours. Pass them one at a time. I also made some adjustments on @couleur since i some cases they don't need to be escaped

.makeCssColor{@couleur) {
    .coul_@{couleur} {
         background-color: fade(@couleur, 15%), fade(Fonce, 15%);

        &.open, &:hover {
             background-color: @couleur, 'Fonce';
        }
        .btMod {
            background : url('/img/btModEvt_@couleur.png') left top no-repeat transparent;
        }
    }
}

when you call the mixin use the below, no need to use quotes

.makeCssColor(bleu);

UPDATE - just pass it in

.makeCssColor(@couleur, @name) {
    .coul_@{name} {
        .top {
            background-color: @couleur;
        }
        .mod {
            background : url('/img/btModEvt_@{name}.png') left top no-repeat transparent;
        }
    }
}

then when you call it

.makeCssColor(@marronFonce, marron);

OR

other option is you can make a loop, it's more complicated but you can try it. I am using an example I already have on my computer

first define a variable with the colour and names

@sample:
    ~"0070" '#ebebe7',
    ~"08x2" '#00247a',
    ~"01k0" '#92918e';

then loops thru it

.sample-loop ( @l ) when ( @l > 0  ) {

    @item: extract( @sample @l );
    @code: extract( @item, 1 );
    @colour: color(extract( @item, 2 ));

    .ext-@{code} {
        background-color: @colour;
    }

    .sample-loop( @l - 1 );
}

and finally call the loop to generate your classes

.sample-loop( 3 );

depending on which version of less you have, the 3 can coded so it is dynamic. If you have older version of less then you have to hard code the length of the variable, or assign the length to a variable so you can use it anywhere