The awesomeness behind LESS :-
If you have never heard of LESS before, let me introduce you it. LESS is a preprocessor for CSS; basically it is a dynamic language, which helps you write CSS more efficiently.
You can also think of it as an addition to CSS because it adds in new behaviors such as variables and mixins which are the driving forces that make writing CSS through less that much simpler and therefore better.
For instance, having variables helps with extensive style sheets where replacing a single hex colour with another could take hours as it is all over the place. When you have a variable in place, you then change the hex for the variable and the value is adjusted automatically for you. And that takes only a few seconds in comparison. You can only images how efficiency and easy of use will then lead to faster development time.
First, you need to make sure that all of your LESS files are saved as .less, like so: example.less. It is just like a CSS file but with .less not .css.
Link the LESS file like you typically would a CSS file. Now, in the
link make sure you specify the relation to be “stylesheet/less.”
When you download LESS form their website, you are given a JavaScript
file. It is the file tht makes less work, actually. It is crucial that
you also include it in your HTML file like any other JavaScript file
If you have never heard of LESS before, let me introduce you it. LESS is a preprocessor for CSS; basically it is a dynamic language, which helps you write CSS more efficiently.
You can also think of it as an addition to CSS because it adds in new behaviors such as variables and mixins which are the driving forces that make writing CSS through less that much simpler and therefore better.
Why you ought to use it
I wouldn’t be writing about LESS if it did not have plenty of advantages. It’s two biggest selling points, if you will, are that it makes CSS programming easier and faster. Let’s explore those two thoughts a little big more.Easier and Faster
CSS is fairly simple to begin with because it doesn’t require a lot of logic; it just has a bunch of rule to define. However, defining those rules can become tricky and tedious at times. You then run into numerous limitations and obstacles that make your life much harder – and there, right there, is not nice. LESS’ features such as variables and functions help you get the hold of your CSS with ease just like they do in other languages such as JavaScript.For instance, having variables helps with extensive style sheets where replacing a single hex colour with another could take hours as it is all over the place. When you have a variable in place, you then change the hex for the variable and the value is adjusted automatically for you. And that takes only a few seconds in comparison. You can only images how efficiency and easy of use will then lead to faster development time.
Similarity in syntax
One other thing that makes LESS great is its similarity in syntax to CSS. This will be especially helpful to people who are new to CSS or have a hard time grasping other language syntax. I think something this obvious is amazing – why create a new syntax for something that is supposed to be a helpful add-on, right? It also means that once LESS is installed, you are ready to go because there is no need to figure out how it works – as long as you know CSS, you know LESS too.Installing this bad boy
Before I explain the installation process for you, I need you to understand something. LESS runs on both the client side and server side. The difference between the two is that on a client-side, the code is run at a user’s computer – like a typical style sheet does. On the server-side, the code runs on the web server first, and then enters a user’s computer all nice and prepared. All this means is that there are two ways to install LESS.Client-side
If you’ve ever linked a style sheet, you are already familiar with how to make LESS work through a client-side method. However, this is a bit more complicated then just linking a CSS style sheet. Let me explain.First, you need to make sure that all of your LESS files are saved as .less, like so: example.less. It is just like a CSS file but with .less not .css.
- styles.css
- rel="stylesheet/less" type="text/css" href="styles.css" />
No comments:
Post a Comment