Installing Less.css on OSX Lion

Today I was following the instructions to upgrade to the latest version of the Twitter Bootstrap.

It’s pretty straight forward. It is really awesome, actually. All you have to do is: Open the terminal, pull the changes, run make.

But, Twitter Bootstrap uses Less.css, so one of the steps of the update script is to compile the .less files into .css. I didn’t have less compiler installed on my MacBook Pro, so instead of successfully upgrading the Bootstrap, I got this on my terminal:

lessc: command not found

So, my first reaction was to try installing less using Homebrew:

Homebrew doesn't have a formula for less.css

Dang it. There is not Homebrew formula for Less. I’ll have to open my browser to install a software, damn it. So I headed to Less.css website and saw that the easiest way to install the compiler to be used on the server side is via the node package manager, npm. Then I did: npm install less

npm installed less

All right, now let’s try running make again.

less not found again

Ok. It’s still not found. Maybe installing it globally will solve the problem: npm install less --global

npm install less with global option

All right, now that less is installed globally, let’s try running make again to update Twitter Bootstrap.

Bootstrap upgraded succesfully. Yay!

Yay, it worked. The --global option did the trick.

  • http://twitter.com/mharnvi Markus Härnvi

    Thanks for the post. I also needed to install uglyfyjs:

    npm install -g uglify-js

  • TimW

    Any idea why I am getting an error?

    lessc ./less/bootstrap.less > ./docs/assets/css/bootstrap.css
    Syntax Error on line 427 in /Users/xxx/Development/twitter-bootstrap/less/forms.less
    426
    427 &+.add-on {
    428 *margin-left: -21px;

    • http://www.pedroreys.com Pedro

      Hey Tim,

      I’m sorry but no, I have no idea.

    • http://pedroreys.com/ Pedro Reys

      Sorry, Tim. I have not idea why you are having that issue.

    • http://naiteluo.net/ naiteluo

      it is a syntax error, you’d better check you less file first.

  • Ben S.

    Thanks! I can compile my Twitter Bootstrap CSS now!

  • Jen

    On My MacBook Pro I can’t use npm:

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

    Had you installed that before you ran into this problem installing less? If so, how did you install npm?

    • http://pedroreys.com/ Pedro Reys

      Hi @0b3ef5635a7ccca8f7e585572130017b:disqus , sorry about the really late reply. For whatever reason I wasn’t being notified about comments on this post.

      Anyway, npm stands for “Node Package Manager” and it needs to be installed as well.

      In order to install it you can either install node.js (http://nodejs.org/) or follow the instructions here: https://github.com/isaacs/npm

    • http://www.facebook.com/profile.php?id=1146844090 Petr Peller

      > brew install npm
      > npm install less

      That easy! ;-)

  • dotred

    Great! This saved me a lot of time! :):)