less undefined method error

Question

I have the following less compile error. My less is below not sure what is causing this.

undefined_methodError: error evaluating function `darken`: Object #<Object> has no method 'toHSL' in /Users/anderskitson/Sites/mrskitson.ca/wp-content/themes/wordpress-bootstrap/library/less/variables.less:164:34
163 @navbarBackground:                "../images/nav.png";
164 @navbarBorder:                    darken(@navbarBackground, 12%);
165

(This action was triggered by a change to navbar.less)

Less File

@navbarBackground: "../images/nav.png";
background: url("{@navbarBackground}");

Answer 1

From the fine manual:

darken

Decrease the lightness of a color by an absolute amount.

Parameters:

• color: A color object.
• amount: A percentage 0-100%.

Returns: color

The darken function wants a color but your @navbarBackground is a URL for a background image. You're getting a complaint about toHSL because LESS is trying to convert the color to the HSL format to make the darkening computation easier.

I don't know of any way to darken an image through LESS, you might need to manually darken the image and switch between them as needed.

Answer 2

You are missing an @ in darken method, i.e.

@navbarBorder:darken(@navbarBackground, 12%);