uf4b uf4b - 4 months ago 35
Less Question

LESS & Bootstrap : error evaluating function `darken`: color.toHSL is not a function in file

I am working with MobileAngularUI framework.

When gulp task build my app, with LESS source files overriding some Bootstrap variables, I get a strange error:

Error evaluating function `darken`: color.toHSL is not a function in file /Users/fabio/mobileangularui/bower_components/bootstrap/less/variables.less line no. 382


In my LESS file I'm overriding some variables like this for example:

@brand-primary: #FF9900;
@my-navbar-link-color: #3399CC;

@navbar-default-color: @brand-primary;
@navbar-default-link-color: @my-navbar-link-color;


What's the problem, why I get this error?

Thanks in advance!

Answer

In variables.less, the @navbar-default-brand-color variable is used:

@navbar-default-brand-color: @navbar-default-link-color;
@navbar-default-brand-hover-color: darken(@navbar-default-brand-color, 10%);

The error you get is because the darken function (LESS native function) is not able to parse your @my-navbar-link-color, so check you have a valid color (in the snippet, it seems to be valid)