What is Lessjs

What is Lessjs

In this article we learn what is lessjs and how we implement.

LESS stands for Leaner CSS. Less is a pre-processor. Less extends css language. In less we can declare variable. Less runs inside nodes. In other word less is css framework which extends our css, it add more feature like initializing variable, mixings, functions and many other technology that allow to make css that is more maintainable.

In this series i am going to cover following things.

Let’s add html page and name it home.htm. After that add a folder and name it style. In this folder we are going to add css file and name it StyleSheet.css.

In style .css

.Div { float:left; font-family: Georgia; font-size : 16px; background-color : black; color: #FFF; width:1000px; height: 40px; padding-top:10px; padding-left:30px; }

.DivOne { float:left; font-family: Georgia; font-size : 20px; background-color:black; color: #FFF; width:1000px; height: 40px; padding-top:10px; padding-left:30px; }

In Home.htm

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head> <link href="style/StyleSheet.css" rel="stylesheet" type="text/css"></link></head>

<body> <div class="Div"> Pramod </div>

<div style="clear:both; height:10px; width:10px;"></div>

<div class="DivOne"> Ravi </div>

</body></html>

Output:

1

But what is new in less.js. We have done these things without using less.js. So I am going to share one amazing feature of less.

Variable Declaration

Suppose client said to me that please replace the black to red in background color. In this scenario i have to manually change color code in all css class. That is painful task for me. Less provide a facility that we can declare a variable. In less variables are case sensitive. In stylesheet.css I am going to declare a variable called bgcolor and set color name as red.

@bgcolor: red;

and replace the code background-color : black to background-color : @bgcolor.

Let’s make some changes in home.htm. In link tag replace rel=”stylesheet” to rel=”stylesheet/less”.

<link href="style/StyleSheet.css" rel="stylesheet/less" type="text/css"></link>

Add a reference of less.js and see the output.

<script src="Scripts/less-1.7.5-min.js"></script>

Output

2

Note: Run as website not as a htm file. Url should be like http://localhost or http://mywebsite.com

Variable Scope

Less has two scopes global and local. A variable that is declared outside a class definition is a global variable, and its value is accessible and modifiable. A variable that is declared inside a class definition is local. Local variable is not accessible outside of class.

I hope this article is helpful for you.

Thanks :)

Tags: , , , , ,