Jump to content

Dynamic colors using less


MargateSteve

Recommended Posts

I am trying to get to grips with some of the more advanced .less functions but have hit a bit of a stumbling point.
 
I have read about using 'when' and am trying to change the text color based on the darkness level of the @brand color. What I have is very similar to an example I saw but that one was setting the background too, so that part has been removed.
@brand-beige: #F5F5DC;
@brand-gray: #808080;

.textcolor(@txtcolor) when (lightness(@txtcolor) >= 50%) {
    color: #fff;
}
.textcolor(@txtcolor) when (lightness(@txtcolor) < 50%) {
    color: #000;
}

/** beige**/
@state-beige-text: textcolor(@brand-beige);
@state-beige-bg: @brand-beige; 
@state-beige-border: darken(spin(@brand-beige, 10%), 50%);

/** gray**/
@state-gray-text: textcolor(@brand-gray);
@state-gray-bg: @brand-gray; 
@state-gray-border: darken(spin(@brand-gray, 10%), 50%);
When I try to compile it I get the following error
SyntaxError: error evaluating function `darken`: Object #<Object> has no method 'toHSL' in W:\wamp\www\Bootstrap\less\test.less on line 12, column 2:
11 .alert-aliceblue {
12  .alert-variant(@alert-beige-bg; @alert-beige-border; @alert-beige-text);
13 }
if I change each of the '@state-xxx-text' variables to anything else, like the bootstrap defaults below, everything works fine.
/** beige**/
@state-beige-text: darken(@brand-beige, 5%);
@state-beige-bg: @brand-beige; 
@state-beige-border: darken(spin(@brand-beige, 10%), 50%);


/** gray**/
@state-gray-text: darken(@brand-gray, 5%);
@state-gray-bg: @brand-gray; 
@state-gray-border: darken(spin(@brand-gray, 10%), 50%);

I am sure I am doing something obviously wrong as I am just getting to grips with it. I thought it might be the syntax but have tried

@state-aliceblue-text: .textcolor(@brand-aliceblue);

@state-aliceblue-text: {textcolor(@brand-aliceblue)};

@state-aliceblue-text: {.textcolor(@brand-aliceblue)};

 

and all give the same result.

 

If anyone could ive any potential pointers, I would be grateful.

 

Regards

Steve

 

 

 

Link to comment
https://forums.phpfreaks.com/topic/295358-dynamic-colors-using-less/
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.