LESS, the dynamic stylesheet language is a new paradigm in CSS. Here we’re going to start a series of articles that will focus on LESS, the dynamic language that will improve your CSS skills. Actually LESS extends CSS with dynamic behaviors, such as variables, mixins, operations and functions within your CSS. It’s extremely powerful and can dramatically speed up your development. There is a little bit of a learning curve to it, but once you wrap your head around it, you won’t type CSS again without using LESS. LESS runs on both the server-side  or client-side.

Learn LESS

LESS Articles Details:

1. Introduction to LESS
2. Working with Variables
3. Working with Mixins
4. Working with Nested Rules

So with that articles list, you’ve got a lot of great stuff to look forward to. Let’s get started on our introduction to LESS.

What Is LESS?

LESS has been around since 2009 and has really ramped up in the past few months, getting widespread use by projects large and small, including Bootstrap, from Twitter, the most popular project on GitHub.

As we progress through this article series, you’ll get a better command on what LESS really is, and what it can be used for, but in short, it allows you to create a powerful library of variables, quick CSS3 effects, and much more.

LESS Resources?

There are many resource places you can read and start about LESS. But first got to the http://lesscss.org official resource of LESS. They will guide you through intro to the code, setup, steps to process your LESS files, and much more. You can also make Google search on LESS that will surely bring up a lot of other tools, tips, and tricks about LESS, but nothing is better than getting your hands dirty in actual code and learning from the ground up.

LESS is Server Side or Client Side?

LESS runs on both the server-side (with Node.js and Rhino) or client-side (modern browsers only).

Client Side usage:

To implement LESS using a client side method, save all of your files as type.less and call them into your document just like you would call a CSS file.

Also link your .less stylesheets with the rel set to stylesheet/less.

<link rel="stylesheet/less" type="text/css" href="styles.less" />

Once you’ve done all of your LESS files loaded up, Now it’s time to call the LESS JS file which compiles all of your LESS files to one CSS stylesheet.

 <script src="less.js" type="text/javascript"></script>

And that’s it for client side LESS implimentation! Make sure that you include your stylesheets LESS files before the script.

Server-side usage:

The easiest way to install LESS on the server, is via npm, the node package manager, as so:

$ npm install -g less

Command-line usage:

Once installed, you can invoke the compiler from the command-line, as such:

$ lessc styles.less

This will output the compiled CSS to stdout, you may then redirect it to a file of your choice:

$ lessc styles.less > styles.css

To output minified CSS, simply pass the -x option. If you would like more involved minification, the YUI CSS Compressor is also available with the –yui-compress option.

So take a time out of your day today to check out LESS and some of the other resources out there.

Coming up next in the LESS article series, Learning LESS: Working with Variables. See you next time.

[vfb id=1]