Contact for Expert ServicesAdvertise with Ecomspark.

What is LESS CSS?

If you are a interactive web developer, then Less css is a must learn style sheet programming language.

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.

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.

lesscss

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.

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.

How to compile style.less to style.css ?

Please write in comment for any feedback and knowledge sharing. thanks. Visit official guide for more – http://lesscss.org/

No Comments

Add a Comment

Your email address will not be published. Required fields are marked *

Translate »