This site has been archived and will no longer be updated.
You can find my new profile at neilpahl.com. My new blog is at 808.ninja.

Motivation Behind This Cheatsheet

LESS code that was working with browser side less.js was faililng to compile when using lessc. Produces error "usr/lib/ruby/gems/1.8/gems/less-2.2.2/lib/less/parser.rb:35: expected ')' got '|' (Less::Error)"

The Cheatsheet

It turns out that having a statement like:

@import url(http://fonts.googleapis.com/css?family=Quicksand:700|Karla);

in your LESS code will cause lessc to fail when compiling. ie when using:

lessc style.less > style.css

The error you get  I got when compiliing was:

usr/lib/ruby/gems/1.8/gems/less-2.2.2/lib/less/parser.rb:35: expected ')' got '|' (Less::Error)
        from at less.Parser.parser.parse (/usr/lib/ruby/gems/1.8/gems/less-2.2.2/lib/less/js/lib/less/parser.js:343:24)
        from /usr/lib/ruby/gems/1.8/gems/less-2.2.2/lib/less/parser.rb:25:in `parse'
        from /usr/lib/ruby/gems/1.8/gems/less-2.2.2/lib/less/java_script/v8_context.rb:90
        from /usr/lib/ruby/gems/1.8/gems/less-2.2.2/lib/less/java_script/v8_context.rb:88:in `call'
        from /usr/lib/ruby/gems/1.8/gems/less-2.2.2/lib/less/java_script/v8_context.rb:88:in `Locker'
        from /usr/lib/ruby/gems/1.8/gems/less-2.2.2/lib/less/java_script/v8_context.rb:88:in `do_lock'
        from /usr/lib/ruby/gems/1.8/gems/less-2.2.2/lib/less/java_script/v8_context.rb:60:in `lock'
        from /usr/lib/ruby/gems/1.8/gems/less-2.2.2/lib/less/java_script/v8_context.rb:30:in `exec'
        from /usr/lib/ruby/gems/1.8/gems/less-2.2.2/lib/less/java_script.rb:26:in `exec'
        from /usr/lib/ruby/gems/1.8/gems/less-2.2.2/lib/less/parser.rb:24:in `parse'
        from /usr/lib/ruby/gems/1.8/gems/less-2.2.2/bin/lessc:98
        from /usr/bin/lessc:23:in `load'
        from /usr/bin/lessc:23

The part that causes the failure is the "|" in the @import statement. This only occurs when importing multiple fonts in one @import statement.

To Fix the Error, I changed

@import url(http://fonts.googleapis.com/css?family=Quicksand:700|Karla);

to 2 statements:

@import url(http://fonts.googleapis.com/css?family=Quicksand:700);
@import url(http://fonts.googleapis.com/css?family=Karla);