Less CSS - SPLessons

Chapter 3

Less Installation

Less Installation

This chapter presents the step by step procedure of Less installation.

With the help of NPM (Node package manager), Less can be installed easily. The operating system and the browser support are the two main requirements for installing LESS.

LESS supports the following browsers.

In order to run LESS example on browser, users need to download and install Node.js package manager.

Installation

Following steps explain how to download and install the Node.js.
Download Node.js directly from the official link https://nodejs.org/en/. Click the link and download the latest feature version as shown in the image below.

After downloading, run the setup file and proceed by clicking next button.
With the help of NPM (Node package manager), users can install LESS on the server. Type the following command in the command prompt to install.

npm install –g less

Now, some lines in the command prompt are displayed after successful installation.
Below example shows how to create a .less file and convert it to .css file
Create an .html file and .less file in the Node js folder.

HTML file

<head>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<h1>SPLessons</h1>
<h3>Hello, welcome to splessons</h3>
</body>
</html>

LESS file

@primarycolor: #C00606;
@color:#3664C7;
h1{
color: @primarycolor;
}
h3{
color: @color;
}

Use the below command to compile the .less file to .css

lessc style.less style.css

By running the above command in the command prompt, the .less file automatically gets converted into .css as shown below.

CSS file

h1{
color: #C00606;
}
h3{
color: #3664C7;
}

After making all the changes, users need to run the .html file in a browser to obtain the output.

Summary

  • The operating system and the browser support are the major requirements to install less.
  • Node.js package manager is mandatory to run Less files.

  • Download and install Node.js latest version.
  • Ensure to install the NPM through command prompt after running the application.
  • Ensure to create both the HTML and Less files in Node js folder.