Site-wide Tags:  Linux(17) | CommandLine(12) | Ubuntu(10) | RemoteAccess(7) | Tools(7) | Vim(7) | LiftWeb(5) | SBT(5) | SoftwareDev(5) | Mac(5) | Scripts(4) | WebDev(4) | Diagrams(4) | Lifty(3) | NetworkDrives(3) | Processwire(3) | Security(3) | Fog(3) | VCS(3) | BestPractices(3) | RaspberryPi(2) | WebDesign(2) | Encryption(2) | Windows(2) | SSH(2) | WinCommandPrompt(2) | GitHubRepos(2) | Emacs(2) | PHP(2) | IDE(2) | ErrorMsgs(2) | JVM(2) | Hardware(2) | Bash(2) | Networks(2) | Graphviz(2) | Cloning | Cygwin | Graphics | Java | SystemRecovery | lessc | Maven | Python | PXE | Samba | LXDE | PackageManagement | LifeHacks | LESS |

This site has been archived and will no longer be updated.
You can find my new homepage at neilpahl.com.

"usr/lib/ruby/gems/1.8/gems/less-2.2.2/lib/less/parser.rb:35: expected ')' got '|' (Less::Error)" caused by @import of multiple Google Webonts

Tags:  LESS   lessc   WebDev   
Created on Thu, 21 Feb 2013.

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);


PLEASE let me know if I'm doing something wrong, or if you have any suggestions or requests~

blog comments powered by Disqus