LESS

  • Last Updated : 01 May, 2022

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

My Personal Notes arrow_drop_up