How many ways to use LESS ?

Last Updated : 07 May, 2023

LESS(Leaner Style Sheets) is a popular CSS preprocessor that expands the capabilities of standard CSS. LESS can be used in a variety of ways, depending on your requirements and tastes. 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. The purpose of using the LESS is to provide features like variables, mixins, nesting, and functions, LESS aims to increase the effectiveness and maintainability of CSS. LESS can save developers time and lessen the chance of errors by making it simpler to write and organize styles, resulting in a more effective and efficient development process. In this article, we will see the number of ways to use the LESS in the HTML code, along with understanding their implementation with the help of examples.

There are various techniques through which LESS can be implemented with the HTML code, which are described below:

Using the CDN link
Using Node.js & npm

We will explore both methods for implementing the LESS & will understand their implementation with the help of simple examples.

Less Installation using Node.js & npm: The following steps will be used to install the LESS:

Step 1: Install Node.js in order to run the LESS. Choose the current version for download on Windows, Mac, & Linux.

Step 2: Once Node.js is installed, we need to install less by executing the following command:

npm install -g less

Step 3: In order to check the version of LESS installed, the following command will be used:

lessc -v

Step 4: Now, create the directory & move to the folder where the less file is stored, or place it in the current working directory.

Step 5: To execute & produce the respective CSS file, type the following command:

lessc styles.less styles.css

Less Installation using the CDN link: In order to use the CDN link, we need to add the following link to the <head> tag:

<link rel=”stylesheet/less” type=”text/css” href=”styles.less” />
<script src=”https://cdn.jsdelivr.net/npm/less@4″></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 1: This example describes the basic usage of the LESS by implementing Node.js & npm.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" 
          content="IE=edge"> 
    <meta name="viewport" 
          content="width=device-width,  
                   initial-scale=1.0"> 
      <link rel="stylesheet" 
          href="style.css"> 
</head> 
  
<body> 
    <h1>GeeksforGeeks</h1> 
    <p> 
          This example describes the implementation 
        of LESS using Node.js & npm 
      </p> 
</body> 
  
</html>

Converting LESS to CSS using a compiler: Here, we’ll compile a LESS file (style.less)to CSS using the command-line program, which will generate the CSS file, with the name style.css, which will be utilized with HTML code:

style.less

CSS

@primary: white; 
@text: green; 
@color: blue; 
  
h1 { 
  color: @text; 
} 
  
p { 
  color: @color; 
} 
body { 
  background-color: @primary; 
}

Now, to run the less file, just execute this command which is given below:

lessc style.less style.css

style.css

CSS

h1 { 
  color: green; 
} 
p { 
  color: blue; 
} 
body { 
  background-color: white; 
}

Output:

Example 2: This example describes the basic usage of the LESS by implementing the CDN link.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" 
          content="width=device-width,  
                   initial-scale=1.0"> 
  
    <link rel="stylesheet/less" 
          type="text/css" 
          href="style.less" /> 
    <script src= 
"https://cdn.jsdelivr.net/npm/less"> 
    </script> 
</head> 
  
<body> 
    <h1>GeeksforGeeks</h1> 
    <h3>LESS Example</h3> 
    <p> 
        This example describes the implementation 
        of LESS using CDN link 
    </p> 
</body> 
  
</html>

style.less

Javascript

@primary: skyblue; 
@text: green; 
@font: sans-serif; 
  
h1 { 
    color: @text; 
} 
  
h1, h3, p { 
    font-family: @font; 
} 
  
body { 
    background-color: @primary; 
}