Less CSS - SPLessons
boy2 Chapter 3

Less Installation

Less CSS - SPLessons

Less Installation

shape Introduction

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

shape Description

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

shape Description

Following steps explain how to download and install the Node.js.

shape Step 1

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.

shape Step 2

After downloading, run the setup file and proceed by clicking next button.

shape Step 3

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

shape Step 4

Now, some lines in the command prompt are displayed after successful installation.

shape Example

Below example shows how to create a .less file and convert it to .css file

shape Step 1

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;
}

shape Step 2

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

lessc style.less style.css

shape Step 3

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;
}

shape Result

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

Summary

shape key Points

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

shape Programming
Tips

  • 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.