How to pre-compile LESS into CSS ?

In this article, we will discuss how to pre-compile the LESS file into a CSS file & will understand its implementation through the example.

Introduction: LESS is a simple CSS pre-processor that makes it possible to create manageable, customizable, and reusable style sheets for websites. LESS is a backward-compatible language extension for CSS along with dynamic style sheet language features that increases the working power of CSS. It allows to use of variables and provides the functionality of a programming language. But if we want to precompile LESS into CSS before using it on a web page, we can do that by using the LESS package of the npm package manager. In this way, we can use less into a simple HTML webpage.

Configuring the LESS to precompile it into CSS: We can install the latest version of the LESS package from npm by using the following command. Before we run the following command, node.js must be installed on the system. Please refer to the Node.js NPM (Node Package Manager) article for a detailed installation process. Now, run the below command to install the LESS compiler globally.

Syntax:

npm install less -g

Note: Run the command prompt as administrator, if trouble in the installation process because of a permission issue.

Pre-compiling LESS into CSS: To compile LESS into CSS, we use the below command in a command prompt. The lessc command lets us precompile our LESS file into a basic CSS file. This helps us in writing modular code using LESS programming and still getting all the benefits of CSS by compiling it into traditional fast CSS.

Syntax:

lessc <source> [destination]

where,

• <source>: The complete name of the LESS file with the address from the current working directory.
• [destination]: The complete name of the desired CSS file with the address from the current working directory.

Example 1: If we have a file style.less in the current working directory and we want to compile it into a CSS file as style.css in the same directory. we use the following command:

lessc style.less style.css

This command converts the LESS file style.less into CSS file style.css.

LESS File:

.container {
   .base-container {
       font-size: 24px;
   }
   .base2-container {
       font-size: 48px;
   }
}

CSS File:

.container .base-container {
 font-size: 24px;
}
.container .base2-container {
 font-size: 48px;
}

Output:

Output

Example2: If we have a file style.less in the other directory( in this case, it is in “D:\Geeksforgeeks” ), rather than in the current directory and we want to compile it into a CSS file as style.css in the same directory. we use the following command:

lessc D:\Geeksforgeeks\style.less D:\Geeksforgeeks\style.css

This command converts the LESS file style.less into CSS file style.css.

LESS File:

@primary-color: #0000ff;
@padding: 4px;
.container {
   .base-container {
       font-size: 24px;
       padding-right: round(@padding);
       color: @primary-color;
   }
   .base2-container {
       font-size: 48px;
       padding-right: round(@padding);
       color: @primary-color;
   }
}

CSS File:

.container .base-container {
 font-size: 24px;
 padding-right: 4px;
 color: #0000ff;
}
.container .base2-container {
 font-size: 48px;
 padding-right: 4px;
 color: #0000ff;
}

Output:

Output

Example: In this example, we have used the above-generated CSS code that is pre-compiled from LESS.

Output: