Less.js Installation

Last Updated : 06 Apr, 2023

LESS (Leaner Style Sheets) is a simple CSS pre-processor that facilitates the creation of manageable, customizable, and reusable style sheets for websites. It is a dynamic style sheet language that enhances the working power of CSS. LESS supports cross-browser compatibility. CSS pre-processor is a scripting language that improves CSS and gets compiled into regular CSS syntax so that it can be used by the web browser. It is also a backward-compatible language extension for CSS that provides functionalities like variables, functions, mixins, and operations that enable us to build dynamic CSS.

LESS was originally designed by Alexis Sellier in the year 2009. LESS is an open-source language easy to learn and understand. The very first version of LESS was written in Ruby. While, in the next versions, the use of Ruby was replaced by a more simple language JavaScript.

Why LESS?

It helps in creating a cleaner, cross-browser compatible CSS faster and easier.
It is designed for dynamic usage using JavaScript which compiles faster than other CSS pre-processor.
It keeps the code in a standard way which makes it easy to read and modify.
It variables make the maintenance of the code faster.

Features of LESS:

It facilitates cleaner and makes code easy to read and hence can be written in an organized way.
Styles can be defined and then they can be reused throughout the code.
It is based on a simple and complete language JavaScript and is a superset of CSS.
It is an active tool that solves the problem of redundancy in code.

Steps for Installation & Compilation of LESS File: We can implement either of the methods to utilize the styles in the LESS file with an HTML, which are given below:

Using Node.js & npm
Using the CDN link

We will understand the installation procedure through the steps given below, along with an example.

Using Node.js & npm: Before using the less file, we have to download the node.js. Then after, we can use less file by doing the process given below:

Step 1: Move to the terminal of our project directory and write the following command:

npm install -g less

Step 2: After successful installation of the compiler, we can check which version of LESS gets installed, by using the following command:

less -v

Step 3: Create the working directory, along with creating a subfolder named CSS, and then create a file named one.less inside it.

Step 4: Add the below codes given to their respective newly created files.

Compiling the LESS File:

Step 5: Move to the CSS subfolder (or the folder where the less file is stored)

cd css

Step 6: Write the following command:

less one.less two.css

A compiled CSS file will be generated from the less file.

Example 1: This example describes the installation of LESS.js using NPM & node.js.

Filename: one.less

css

@primary: green; 
@bgcolor: yellow; 
@text: red; 
@blue: blue; 
@text1: #ffff00; 
@color: #7940f2; 
  
h1 { 
  color: @primary; 
  background: @bgcolor; 
} 
h2 { 
  color: @text; 
  background: @blue; 
} 
h3 { 
  color: @text1; 
  background: @color; 
}

A new file named two.css will be created with the following content:

Filename: two.css

css

h1 { 
  color: green; 
  background: yellow; 
} 
h2 { 
  color: red; 
  background: blue; 
} 
h3 { 
  color: #ffff00; 
  background: #7940f2; 
}

Filename: index.html

html

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <title>GeeksforGeeks</title> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content= 
    "width=device-width, initial-scale=1.0"> 
    <link rel="stylesheet" href="two.css"> 
</head> 
  
<body> 
    <h1>GeeksforGeeks </h1> 
    <h2> 
        Less.js npm & node.js  
        installation process 
    </h2> 
    <h3>!!!Thank you!!!</h3> 
</body> 
</html> 

Output:

Using the CDN link: In order to use the CDN links with an HTML, we can add the following links inside the <head> tag:

<link href="styles.less" type="text/css" rel="stylesheet/less"/>
<script src="less.js" type="text/javascript"></script>

The above-required links will implement the particular LESS code into the converted CSS code, that will be utilized in the HTML file & accordingly add the specific styling for the elements, to which the style is applied.

Example 2: This example describes the LESS.js installation by implementing the CDN link.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Less.js using CDN </title> 
    <link href="styles.less" 
          type="text/css" 
          rel="stylesheet/less" /> 
</head> 
  
<body> 
    <h1>GeeksforGeeks</h1><br> 
    <h1>Less.js Using CDN </h1> 
    <p> 
        <a href="https://www.geeksforgeeks.org/"> 
            Read the tutorial 
        </a> 
    </p> 
</body> 
  
</html>

Filename: styles.less

css

@body-bg-color: #5349ab;  
@text-color: rgb(70, 172, 121);  
@button-bg-color: #acd690;  
  
body {  
  background: @body-bg-color; 
  color: @text-color; 
  font-family: sans-serif;  
  text-align: center;  
} 
  
a:link, a:visited {  
  background: @button-bg-color; 
  color: @text-color; 
  display: inline-block; 
  padding: 10px 10px; 
  text-decoration: none; 
} 
  
a:hover {  
  background-color: desaturate(@button-bg-color, 50%); 
} 
  
a:active { 
 background-color: saturate(@button-bg-color, 50%); 
}

Filename: styles.css

css

body { 
  background: #5349ab; 
  color: #46ac79; 
  font-family: sans-serif; 
  text-align: center; 
} 
a:link, 
a:visited { 
  background: #acd690; 
  color: #46ac79; 
  display: inline-block; 
  padding: 10px 10px; 
  text-decoration: none; 
} 
a:hover { 
  background-color: #b3b3b3; 
} 
a:active { 
  background-color: #a4fc6a; 
}