LESS

Last Updated : 24 Jul, 2024

LESS (Leaner Style Sheets) is a dynamic preprocessor style sheet language that can be compiled into CSS (Cascading Style Sheets). LESS extends CSS with dynamic behaviour such as variables, mixins, operations, and functions. The main advantage of using LESS is that it makes writing CSS easier and more efficient, providing better organization and readability for your stylesheets. It is also a backwards-compatible language extension for CSS that provides functionalities like variables, functions, mixins, and operations that enable us to build dynamic CSS. It introduces programming concepts to CSS, such as variables and functions, which help create more reusable and maintainable code.

Why use LESS?

Maintainability: LESS allows for a more organized structure, making stylesheets easier to maintain.
Reusability: With mixins and functions, you can reuse code snippets throughout your stylesheets.
Extensibility: LESS extends CSS with features like variables and nesting, making it more powerful.
Simplicity: Despite its advanced features, LESS syntax is straightforward and easy to learn.

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.

Installation Steps and 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.

1. Using the CDN link

To use the CDN links with 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.

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

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

CSS Introduction

hardiksm73

Improve

Article Tags :