A Compact Guide To Learn LESS With its Pros And Cons

Posted By Tajinder Singh | 26-Sep-2018

What is Less?

Less is an open source language that is preprocessor of CSS which helps us to customize the stylesheets of the webpage. We can say it is an extension to CSS and that can run on the client-side as well as server-side. It is Written in JavaScript and requires NodeJS also.

It is a language that is also used to build dynamic CSS. It looks very similar to CSS but it provides various functionalities such as variables, functions, mixins, and operations etc. The syntax of using Less is same as CSS.

Features of Less

1. When we write code in Less then it is more readable and compact. Readability is the key.
2. Less can run in Cross-browsers.
3. Less is faster and easier.
4. It is Written in JavaScript and requires NodeJS also.
5. Variables are used that makes it faster for maintenance.
6. It provides nesting that is used to make the code short and easy to read.
7. In less, the styles can be reused in whole code.
8. we can say it is a  superset of CSS.
9. @import rule helps us to import external files.  

Advantages of Less

1. It provides cross-browser compatibility that can be used to run in any browser.
2. Importing the external files is the main advantage of using less.
3. Nesting makes it easier to write the code and make it less in lines. 
4. Readability of code is also a major advantage of using less.
5. It is written in JavaScript, so it is an advantage of using less.

Disadvantages of Less

1. If someone is new to CSS preprocessor then it is very difficult for them to learn Less. 
2. Less provides fewer frameworks as compared to older preprocessors.

Example of using Less:

HTML file: lessExample.html

<!DOCTYPE html>  
<head>      
 <link rel="stylesheet" href="lessExample.css" type="text/css" />  
</head>  
<body>  
 <h2>An example of Less</h2>  
 <h3>Hello World</h3>  
</body>  
</html>  

Now create a file named "lessExample.less".

Less file: lessExample.less

@primarycolor: Blue;  
@color:yellow;  
h2{  
color: @primarycolor;  
}  
h3{  
color: @color;  
}  

 

 

 

Request for Proposal

Recaptcha is required.

Sending message..