What is LESS CSS?

If you are a interactive web developer, then Less css is a must learn style sheet programming language. Basic pre requirement is to learn css is basic CSS knowledge. If you want to learn what  is CSS. Please visit my post about CSS.

LESS CSS – A dynamic style sheet language, an extension to CSS with more extra features or we can say dynamic features like variables, mixins, operations and functions. Less uses .less extension and it makes code more cleaner, optimized, reusable and reduce the overall time to create code base. LESS can be complied in to simple CSS and can be used. Visit How to compile Less to css code.

We can use LESS CSS with node.js or with browser  –

1- With node.js,

install less

npm install -g less

Compile LESS to CSS

 lessc styles.less styles.css 

i already shared the link of my post – how to compile less css.

2- With Browser – Include LESS js file and style.less file

https://cdnjs.cloudflare.com/ajax/libs/less.js/3.9.0/less.min.js

Why use LESS CSS ?

– it saves time

– fewer line of code

– no repetition

– reduce mistakes

To write less css, we can use primary css attributes class and ids etc but to see the output of code in browser we need to change the .lees css file to .csss file extension.

Variables – As other programming languages, we can define variables (string, keyword etc.).  Less variables start with @ symbols. Define once and use every where and change once, update everywhere. I like the variable most in less because we don’t need to repeat one thing again and again in CSS. Like we don’t need to change color code in style on each line if we use variable. Change once, update everywhere.

Eg 1. @black = #000000; @grey = #4a4a43;
Eg 2 -
@var1 = "I am Gaurav";
@var2 = "var1";
div {content : @@var2 ;}

Less css a working tutorial
Mixins

Mixins allow us to  create rules and use these rules any where in any class. It’s like functions in any programming language, in less we used variables with functions by allowing to include all the properties associated with a class into another class.

Example –
/* LESS CSS */

.radius {
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
#menu {
color: blue;
.radius;
}

/* Compiled CSS */

.radius {
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}

#menu {
color: blue;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}

Variables and mixins are 2 most important properties of LESS.

Nested Rules– Nested rules are for inheritance, that makes stylsheet cleaner and shorter by using selector group, rather than specifying each instant each time.
It’s also a great overcome over css in less css.

#header{color:black;}
#header .navigation {
font-size: 12px;
}
#header .logo {
width: 300px;
}

/* LESS code */

#header {
color: black;
.navigation {
font-size: 12px;
}
.logo {
width: 300px;
}
}

Operations- We can also perform operations in less like addition, subtractions, multiplications and division to number, variables and color in the style sheet.

For Eg –

@width = 100px;

.a{ width: @width; }
.b { width: @width * 5; }

Above, i store 100px to variable @width. then assign @width to class a and assign 5 times a’s value to class b.

Functions – LESS comes with a variety of built in functions like Logical functions,String Functions, List Functions and Type functions.

Eg:
Lets define some predefined value –

@unit:em;
@basevalue:1;

Now, lets write a function –

.abc {  margin-top: unit(@basevalue, @unit); }
.xyz{  margin-top: unit(@basevalue*5, @unit); }

Output –

.abc{
  margin-top: 1em;
}
.xyz{
  margin-top: 5em;
}

With these basic rules, you can start writing less css for your web development projects. when you start writing it will be very interesting to write less css because it’s having programming approach.

Visit my 2 other posts for LESS CSS –
How to compile style.less to style.css ?

LESS CSS – A working tutorial

Please write in comment for any feedback and knowledge sharing. Thanks