less function to generate css class

Question

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

What is the error you get? shouldn't @{couleur} be @couleur you are not escaping that string. Also as far as I remember you don't need quotes for strings .makeCssColor(bleu) instead of .makeCssColor("bleu") — Huangism
– Huangism, Commented Aug 25, 2017 at 14:53
The problem is that with my less converter, I just have an error : LESS error when compiling But no more informations. I tried to change my code like you said, but I have the same error :( — matche
– matche, Commented Aug 25, 2017 at 15:04

Huangism · Accepted Answer · 2017-08-25 16:40:40Z

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/[email protected]') 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

Unfortunalty, the second solution didn't works, but it works fine with the first one :) Thanks a lot for your time and have a good day !

Collectives™ on Stack Overflow

less function to generate css class

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related