Learning LESS: The dynamic stylesheet language

LESS, the dynamic stylesheet language is a new paradigm in CSS. Here we’re proudly going to start a series of articles that will focus on LESS, the dynamic language that surely put your CSS on top. Actually LESS extends CSS with dynamic behavior 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
5. Working with Functions

 

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 gouide 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.

 

 

About the Author: Laeeq

A web developer who has a love for creativity and enjoys experimenting with various techniques in both web design and development. If you would like to be kept up to date with our posts, you can follow us on Twitter, Facebook, Google+, or even by subscribing to our RSS Feed.

More posts like this

14 Comments + Add Comment

  • Great article. Looking forward to your next article and the entire series. I try to use LESS in all my design work.

  • Great. I will keep reading and checking back. Good job.

  • Superb article, great job, awesome blog, thanks a lot!

  • When is the next post in this series?

    • It will be live tomorrow. Each week we will have a new post in this series going live so keep checking back!

  • Very nice and helpful tutorial. Ty and keep up!

  • great job!

  • LESS is going into my next project … I’ll be looking forward to reading this series of posts.

  • I heard a lot about LESS but I never got the chance to read about. Thanks for the introduction, looks like a must have! :)

  • gr8 less tutorial!

  • useful LESS tuttorial!

  • googd article!!!

  • Wow, amazing blog layout! How long have you been blogging for?
    you made blogging look easy. The overall look of your web site is excellent, as well as the content!

  • [...] sheet language is a new paradigm in web design. In our previous articles, you have learn about LESS, variables, mixins, and its nested rules. LESS is compiled at run time into CSS. Since this does [...]

Leave a comment

(You can, of course, unsubscribe at anytime).