LESS

Last Updated : 21 Mar, 2024

LESS is a Leaner Style Sheets, which 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.

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.

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.

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.

Installation Steps & 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 the CDN link
Using Node.js & npm

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

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

Using Node.js & npm:

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

Step 2: Add the following code to the newly created file and save it:

styles.less

@text-color: #25c75c;
@text-light-color: #ebebeb;
@background-color: #2b2b2b;

body {
    font-family: sans-serif;
    background: @background-color;
    color: @text-color;
    text-align: center;
}

h1 {
    color: @text-color;
}

a {
    color: @text-light-color;
    text-decoration: none;
    &:hover {
        color: @text-color;
        text-decoration: underline;
    }
}

Compiling the LESS File:

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

npm install less

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

lessc -v

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

cd css

Step 4: Write the following command:

lessc styles.less styles.css

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

styles.css

body {
    font-family: sans-serif;
    background: #2b2b2b;
    color: #25c75c;
    text-align: center;
}
h1 {
    color: #25c75c;
}
a {
    color: #ebebeb;
    text-decoration: none;
}
a:hover {
    color: #25c75c;
    text-decoration: underline;
}

Step 5: Now, you can link this CSS file to your HTML file.

HTML

<html>

<head>
    <meta charset="UTF-8" />
    <title>LESS Tutorial</title>
    <link rel="stylesheet" href="./css/styles.css" /> 
</head>

<body>
    <h1>GeeksforGeeks</h1>
    <h3>LESS</h3>
    <p> This link will redirect to the homepage of 
        <a class="link" 
            href="https://www.geeksforgeeks.org/">
                GeeksforGeeks
        </a> 
    </p>
    <p>This is the basic LESS tutorial example.</p>
</body>
</html>

Output:

Advantages of LESS

It helps to easily generate the CSS that can work efficiently across different browsers.
It enables users to write better with well-organized codes using the nesting concept.
LESS variables make the maintenance of the code faster.
It enables the users to utilize the classes in a repetitive manner(based on the requirement), easily by referencing them in the rule sets.
LESS provides the users to use operations that make the coding faster and save a lot of time.

Disadvantages of LESS

Due to the tight coupling between the modules, more effort needs to be taken to use them again and test dependent modules.
LESS contains fewer frameworks like SASS, which consists of Compass, Gravity, and Susy frameworks, as compared with other older pre-processors.
Learning the LESS without having knowledge of CSS, will be a tedious task for new users.

Please write comments if you find anything incorrect, or you want to share more information about the topic discussed above

Share your thoughts in the comments

CSS Frameworks

CSS Preprocessor

JavaScript Libraries

ReactJS

AngularJS

jQuery