Hi all reader, Just like MySQL Stored Procedure, here I come with brand new article series which for LESS CSS. First of let me explain what is LESS CSS.
Here is the introduction from the official site:
The dynamic stylesheet language. LESS extends CSS with dynamic behavior such as variables, mixins, operations and functions. LESS runs on both the client-side (Chrome, Safari, Firefox) and server-side, with Node.js and Rhino.
From: http://lesscss.org/
Introduction
LESS CSS is the very good and effective way to make your css dynamic. Yes dynamic refers to variables, mixins(functions), parameterized mixins, and lot more.
To get started with LESS CSS, you will need to download less.js file, you can download this file from here : http://lesscss.org/
Now once you have downloaded the js file, you will have to create .less file. Afraid???? Hey don’t Worry, You don’t need to learn new syntaxs and all that. You will be good at LESS as much as you are with CSS.
Yes LESS code is almost same as CSS, the only differnce is use of variables, mixins and other inbuilt operators.
How to Use?
As I have already mentioned you will have to download the LESS.js file from the official site. Then after you will have to create a new file with extension .less, Yes you don’t need to create .css file.
Order of file inclusion is importing while playing with LESS.
1) First you need to include your .less file just like including the css file, have a look at below code block for the same.
[cc lang=”html”] [/cc]
2) After including the .less file you need to include the less.js file which you have just downloaded. This is the traditional js file so you can include in a normal js include way. But still have a look at below code block:
[cc lang=”html”]
[/cc]
Now if you have included above files properly then code in your .less file will get compiled and turn into traditional css code and it will render your page expected.
Conclusion
So this is the very basics for the LESS CSS for how to setup the .less file. Now in next article we will see how to use the variables in the LESS CSS.
If you don’t want to miss any upcoming article in this series then subscribe to our RSS Feed via mail, Like us on Facebook or Follow us no Twitter. If you do so, I am sure you will never miss any article/freebies or updates from us.
