Less in Simple Terms

Less is an extension to normal CSS. Its not only backward compatible with CSS, it allows us to use existing CSS syntax. This makes learning Less an easy task and if we ever find difficulty it lets you fall back to vanilla CSS.

Less allows variables, mixins, functions and many other techniques that allow you to make CSS more maintainable, themeable and extendable.

Since Less syntax is not standard as per w3c specification the browsers won’t support the direct inclusion of Less code in your project. Hence we will have to compile the code before the inclusion or before the usage.

Why did I say “before the inclusion or before the usage”?
Yes! there are two ways you can do the conversion.

Less runs inside Node, in the browser, and inside Rhino. There are also many 3rd party tools that allow you to compile your files and watch for changes.

Since the easiest way is to do the conversion at the client side Let’s see how it can be achieved.
link your .less stylesheets with the rel attribute set to “stylesheet/less

download less.js and include it in your page:

and yeah!
Make sure you include your stylesheets before the script.

That’s it, less.js will take care of compiling your files and make it work for you. But, it’s not recommended in a production environment since the process takes time and affects the performance badly depending on the number of files you have.
The other way is to pre-compile it before adding, may be by using node or any third party tools which will give us the CSS file which could be added in the HTML.

Start coding Less
Variables:

The above is a self explanatory piece, the words preceding ‘@’ are variables and the value specified after colon ‘:’ is the value which it represents.

mixins:

Mixins are a way of including a bunch of properties in one rule set and reusing the whole in another rule set.

The above example shows how to make use of mixin and it generates this,

After comipling, In case if you don’t want the mixin to be generated as a class just add paranthesis after the mixin so that Less doesn’t consider it as a class.

This generates,

The “!important” keyword:

Use the !important keyword after mixin call to mark all properties inherited by it as !important

Results in,

mixins with parameters:

Mixins can also take arguments, which are variables passed to the block of selectors when it is mixed in.

mixins with multiple parameters:

Parameters are either semicolon or comma separated. It is recommended to use the semicolon.

Results in:-

We can even specify the default values for the parameters as shown so that we don’t need to worry about passing all the params.

Named Parameters:

A mixin reference can supply parameters values by their names instead of just positions. Any parameter can be referenced by its name and they do not have to be in any special order,

Compiles to:

Nested Rules:

Functions:

There are a lot of in-built functions, which could be used to fasten the things or you can even write your own functions using mixins.

Operations:

We can also perform operations, such as addition, subtraction, multiplication, and division to numbers, colors and variables in the style sheet.

Scope:

LESS applies the Scope concept, where variables will be inherited first from the local scope, and when it is not available locally, it will search through a wider scope meaning parent level.




Tagged as: , ,