Introduction to LESS
Last Updated :
05 Oct, 2022
LESS is a simple CSS pre-processor that makes it possible to create manageable, customizable, and reusable style sheets for websites. LESS is a dynamic style sheet language that increases the working power of CSS. LESS is cross-browser compatible. CSS pre-processor is a scripting language that improves CSS and gets compiled into regular CSS syntax so that the web browser can use it. This also provides functionalities like variables, functions, mixins, and operations that enable us to build dynamic CSS.
Why use LESS?
- LESS 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.
- LESS keeps the code in a standard way which makes it easy to read and modify.
- LESS 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.
LESS features:
- LESS is 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.
- LESS is based on a simple and complete language JavaScript and is a superset of CSS.
- LESS is an active tool that solves the problem of redundancy in code.
Advantages of LESS:
- LESS generates CSS easily that can work across different browsers.
- LESS enables users to write better and well-organized codes with the help of nesting.
- LESS variables make the maintenance of the code faster.
- LESS enables the users to use the classes again and again easily by referencing them in the rule sets.
- LESS gives the users to use operations that make the coding faster and save a lot of time.
Disadvantages of LESS:
- For new users, it is a tiring job to learn LESS if they don’t have knowledge of CSS.
- Due to the tight coupling between the modules, more efforts need to be taken to use them again and test dependent modules.
- LESS, as compared with other older pre-processors, has less frameworks like SASS, which consists of Compass, Gravity, and Susy frameworks.
Let’s see some examples of less-
Syntax:
@primary:green;
@text:black;
@color:white;
Example 1: The following example demonstrates the use of less –
index.html
HTML
<!doctype html>
<head>
<title>Mixin Guards</title>
<link rel = "stylesheet" href = "style.css" type = "text/css" />
</head>
<body><br><br>
<h1><b>GeeksforGeeks</b></h1>
<h2><b>Less examples...</b></h2>
</body>
</html>
|
Next, create the less file-
style.less
Javascript
@primary:green;
@text:black;
@color:white;
h1 {
color: @primary;
}
h2 {
color: @color;
}
body {
background-color: @text;
}
|
To compile the less file to a CSS file, write the following command.
lessc style.less style.css
Execute the above command, it will create the “style.css” file automatically with the following code.
CSS
h1 {
color: green;
}
h2 {
color: white;
}
body {
background-color: black;
}
|
Output:
Example 2: The following example demonstrates the use of mixin in less –
Index.html
HTML
<!doctype html>
<head>
<title>Mixin Guards</title>
<link rel = "stylesheet" href = "style.css" type = "text/css" />
</head>
<body><br><br>
<h1 class="p1"><b>GeeksforGeeks</b></h1>
<h2 class="p3"><b>Less examples...</b></h2>
</body>
</html>
|
Now, create the less file –
style.less
Javascript
.p1 {
color:green;
}
.p2 {
color:black
}
.p3 {
border:4px dashed blue;
width: 120px;
height: 70px;
.p2();
}
|
To compile the less file to a CSS file, write the following command.
lessc style.less style.css
Execute the above command, it will create the “style.css” file automatically with the following code.
style.css
CSS
.p1 {
color: green;
}
.p2 {
color: black;
}
.p3 {
border: 4px dashed blue;
width: 120px;
height: 70px;
color: black;
}
|
Output:
Reference: https://lesscss.org/
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...