LESS is a dynamic stylesheet language published as open-source. It includes a pre-processor that allows compile a template -in LESS language- and get a standard CSS as output. Main difference among LESS and other CSS pre-compilers is that LESS allows real-time compilation via LESS.js by the browser (client-side) or even it is possible to compile server-side.
LESS provides the following features to create awesome stylesheet:
- Variables. A variable is a storage location and an associated symbolic name (an identifier) which contains some known or unknown quantity or information, ie. a value. In LESS it is possible to define variables with a variable name and re-used where you need them.
- Nesting. Rather than constructing long selector names to specify inheritance, in Less you can simply nest selectors inside other selectors. This makes inheritance clear and style sheets shorter.
- Mixins. Allow you to embed all the properties of a class into another class by simply including the class name as one of its properties. It’s just like variables, but for whole classes. Mixins can also behave like functions, and take arguments, as seen in the example below.
- Operations. Let you add, subtract, divide and multiply property values and colors, giving you the power to create complex relationships between properties. Operations should only be performed within parentheses in order to ensure compatibility with CSS. Functions map one-to-one with JavaScript code, allowing you to manipulate values however you want. Any number, color or variable can be operated on. The output is pretty much what you expect—LESS understands the difference between colors and units.
- Functions. Map one-to-one with JavaScript code, allowing you to manipulate values however you want. LESS provides a variety of functions which transform colors, manipulate strings and do maths. They are documented fully in the function reference.
Advantages of using LESS
- Better organization in your project. Imagine that you have too many stylesheets, manage them is usually complicated, so with LESS you can use namespaces, functions and mixins, all this allow you improve the way your project are organized.
- Avoid repetitions. When we are working with CSS is common to have many repeated rules, for this reason if for example you need to change the value of a color it will be necessary to change all rules where this color is been used. With LESS you can use a variable to solve this situations, just declare one and re-use it wherever you want!
- Optimizing your CSS. When you use LESS and a tool it is possible to define some parameters like compress by default, delete comments, etc. so, your stylesheet will be optimized and ready to integrate in your project.
- Re-using CSS rules. LESS has mixins they allow you re-use styles wherever you need, for example you could define a set of CSS rules and then with a single line you can “call” them to render in a specific place (inside other class, for example).
- Arithmetic functions. This feature is awesome! Imagine that you need a font-size calculated depending an operation (like a division), well with less it is possible to run arithmetic functions and assign the result to a CSS property later.
As you can see, with LESS we have a lot of resources to improve our front-end development, if you need more information please visit the official website of LESS: http://lesscss.org/
That’s it!
Be happy with your code!
—