Home > css, linux, ubuntu, web development > Install less on Ubuntu with YUI-compressor

Install less on Ubuntu with YUI-compressor

Some days ago I’ve been testing twitter bootstrap and I’m very interested on using less on my projects.

Less brings programming into CSS files. Learn more about less in the less website.

To compile the .less files in Ubuntu, first install the requiered packages [please refer to the updated note at the end of the post]:

$ sudo apt-get install lessc

Now you can create your first less file:

@color: #4D926F;

#header {
  color: @color;
}
h2 {
  color: @color;
}

and compile it:


$ lessc my_first_less_file.less

#header {
 color: #4d926f;
}
h2 {
 color: #4d926f;
}

You can redirect the standard otuput to a file to get the css file:

$ lessc my_first_less_file.less > my_first_less_file.css

To output the minified CSS, just add the -x option:

$ lessc -x my_first_less_file.less
#header{color:#4d926f;}
h2{color:#4d926f;}

You can also use the YUI Compressor with less:


$ lessc --yui-compress my_first_less_file.less
#header {
 color: #4d926f;
}
h2 {
 color: #4d926f;
}

Yep! Something’s wrong… Is there an error with less –yui-compress?

I think there’s a problem with the –yui-compress option.

To workaround this, I’ve installed yui-compressor:


$ sudo apt-get install yui-compressor

<em id="__mceDel">

Now, I generate  the css with lessc and then compress it with YUI:


$ lessc --yui-compress my_first_less_file.less > my_first_less_file.css

$ yui-compressor my_first_less_file.css

#header{color:#4d926f}h2{color:#4d926f}

I will do further investigation about the less –yui-compress fail.

Updated!

I’ve installed the incorrect version of less, and the –yui-compress was not working:

I previously installed this packages:

<pre>$ sudo apt-get install libc-ares2 libev4  libnode-less libv8-3.1.8.22 nodejs

But this installs an old version of less:


$ lessc --version
lessc 1.1.0 (LESS Compiler) [JavaScript]

$ sudo apt-get remove lessc --purge

$ sudo apt-get install lessc

$ lessc --version
lessc 1.3.3 (LESS Compiler) [JavaScript]

Now I can compile with –yui-compress working!

About these ads
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 33 other followers

%d bloggers like this: