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.
LESS Articles Details:
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.
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.
And that’s it for client side LESS implimentation! Make sure that you include your stylesheets LESS files before the script.
The easiest way to install LESS on the server, is via npm, the node package manager, as so:
$ npm install -g less
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.