2

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}");
mu is too short
  • 426,620
  • 70
  • 833
  • 800
Cool Guy Yo
  • 5,910
  • 14
  • 59
  • 89

2 Answers2

8

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.

seven-phases-max
  • 11,765
  • 1
  • 45
  • 57
mu is too short
  • 426,620
  • 70
  • 833
  • 800
  • Depending on your usage, you could use opacity coupled with a black background to achieve your 'darken' effect, and a white background to do a 'lighten' effect. inversely, you could overlay an opaque (white or black) div on the image. – Patrick Jan 15 '13 at 12:28
  • Helped me a lot, though in my case ( to share for others ) - I had a `!default` inside my variable, `@incomplete: #bbb !default;` so it was also - not just a color HEX ... – Ricky Levi Aug 19 '16 at 20:02
-2

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

@navbarBorder:darken(@navbarBackground, 12%);
SteveC
  • 15,808
  • 23
  • 102
  • 173
user3454062
  • 171
  • 2
  • 1