Intro to LESS CSS – Part 1

If you are a frontend developer/designer some time in future you will run into LESS, which is a CSS preprocessor. LESS offers many benefit over plain vanilla CSS. IT make you working with CSS simple and fun. User can write dynamic CSS via LESS. The learning curve for LESS is very minimal.

We can write modular CSS using LESS. LESS includes variables, mixins, nested rules, operations, color functions and many more features. It is fun once you get used to it.

Below you will find examples which make you to easily understand LESS.

Variables Declaration:- They are time savers declare once and use it where required.

MIXINS:- They are resuable piece of code. Mixins allow us to specify a chunk of code as a class and then allow us to mix those classes together. They are divided in two types, Normal Mixin and Parametric Mixin.

A Parametric Mixin is same as normal Mixin but it takes parameters/arguments with Mixin.

We also can override parameters in it.

Example of Parametric Mixin with Variable.

NESTED RULES:- LESS allows users to write new CSS rules within curly braces of existing rules.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s