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