Clever Geek Handbook

Smaller mixin name is graded by color / color

I have fewer files to define a set of colors / colors. Each class name contains the name of the corresponding color, such as .colourOrange{..}

or .colourBorderOrange{..}

or navLeftButtOrange{..}

.

To make it simple, I have a mixin that uses the parameter name: color, and uses that to denote classes in this way:

.completeColour(@colourName, @col) {
.colour@{colourName}{
    …
}
.colourBorder@{colourName}{
   …
}
.leftNavButt@{colourName}{

.....}}

The problem is that class names are color-coded appropriately . So instead of getting, .leftNavButtOrange{}

I get .leftNavButt#ffa500{}

in the resulting CSS

Is there a way to stop this with a compiler argument or something. Basically, I don't want the parameter to be evaluated, read, but not evaluated. Can I do this with a compiler argument or do I need to change the names so they don't match the color like myAppOrange or something.

+1


source to share


1 answer


This is a deprecated Less feature. Currently, one of the below listed solutions can be used to overcome this color name to hexadecimal conversion.

.completeColour(~"Orange",1);

or

.completeColour(e("Orange"),1);

Both options explicitly tell the compiler that the passed value is a string, not a color, and therefore less the compiler will not convert it to the appropriate hexadecimal code.



Sources:

Update: As of version 2.0.0, this color name to hexadecimal conversion will not occur unless the color is mentioned explicitly as a name and has no other color-based operations. Version 2.0.0 is currently in beta mode.

( Official Update: Upgrade Guide V2 | Original Source: More consistent named color variables ).

+2


source






More articles:


All Articles