LESS Compiling of variables.less throwing error

First, thanks for the great base theme template. I’m currently using Bones by Themble for a few other sites, but came across this looking for alternatives!

I’m having an issue with LESS. I was adding variables to the variables.less file, and upon saving and compiling with CodeKit, I get this error:

undefined_methodError: error evaluating function `lighten`: Object #<Object> has no method 'toHSL' in /Users/amores/Sites/afl_v2/wp-content/themes/retlehs-roots-a56551a/assets/less/variables.less on line 43, column 25:
42 @link-color:            @brand-primary;
43 @link-hover-color:      lighten(@link-color, 15%);

Trying darken also throws the same error. Any one else having this experience/issue? Is it the less.js that’s screwy or just me?

My CodeKit is in its latest build (1.7.1).



Maybe try using the command line instead of CodeKit?

npm install -g less
lessc styles.less styles.css


You can try to use Prepros App. It works well for me.
And yeah as the last and I assume the best way is to use command line if you feel comfortable with it.

Thanks for the tips and assistance.

I tried running the node packet manager in the less folder of roots like you suggested, @leoj3n, but I get the error

 $ npm install less
 -bash: npm: command not found

I’m not familiar enough with npm to know where I’m going wrong on that.

@cluendo, I downloaded the Prepos App (nice iOS 7 flat design!) and added the roots theme folder to it. Made adjustments and am still getting the same error as I had in CodeKit:

error evaluating function `lighten`: Object #<Object> has no method 'toHSL'
/Volumes/Macintosh HD/Users/amores/Sites/afl_v2/wp-content/themes/retlehs-roots-a56551a/assets/less/variables.less line 43 

What is @brand-primary set to? Sounds like it might not be a color…

1 Like

thanks @chriscarr, that was it. an extra digit was lurking in the hex code. ::slaps forehead::