Menu
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!
739
Less (which stands for Leaner Style Sheets) is a backwards-compatible language extension for CSS. This is the official documentation for Less, the language and Less.js, the JavaScript tool that converts your Less styles to CSS styles.
Less is the comparative form of the function word little and can be used in the following ways: as a determiner (before a noun): Eat less fat. Schools put less emphasis on being creative.
Less variables are defined with a symbol @ and the values are assigned in the variable with a colon ( : ). Variables are actually "constants" in that they can only be defined once.
Extend is connected to a selector which looks similar to a pseudo class with selector as parameter. The &:extend(selector) syntax can be put inside the body of ruleset. Nested selectors are matched using the extend selector. By default, extend looks for the exact match between the selectors.
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)
129
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
