Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to create the LESS file and how to compile it
Overview
A Leaner Style Sheets (LESS) is a dynamic preprocessor language the base language of it is Cascading Style Sheet (CSS). All the preprocessor languages are the upgraded version of the base language, so the LESS also has many more additional features. The LESS has a feature of variable, parent selector, mixins, nested selector, etc. In java on compiling the source code of “.java” file it produces the output as the “.class” file, same as java the LESS file on compiling the “.less” file produces a new file “.css” as output
Approach
To create and compile a LESS file we need to follow certain steps −
Open the terminal on your desktop or command line (cmd). Install the Learner Style Sheets (LESS) environment globally into your computer using a node package manager (npm).
npm install less –g
Create a folder on your desktop. Now open any text editor and write LESS code in it.
Save the file which contains “.less” code with the name of “style.less”.
Now open Command Line Interface (CLI), reach to the subfolder where you have created your “style.less” file using the command cd folderName. “cd” means change directory.
On reaching the folder of less file, type the command given below to compile the “style.less” and will result in a creation of “style.css” file.
lessc style.less > style.css
Open the file “style.css” and the code inside will be the converted css code of the “style.less” file.
Features
The main features of Leaner Style Sheets (LESS) are −
Variables − The less language has a feature in which we can create the variables and can store the css property values in it. The prefix used to create the variable in a less file is “@”. For example: @width:10rem, @height:10rem, @background: green, etc.
Mixins − This feature provides the styling code not to repeat again. We can reuse the above created styling as the styling for the other element also.
For example −
@width:10px; //variables created
@height:@width+10px; //variables created
.box{ //box class is styled using the above variable
width:@width;
height:@height;
}
.profile{
.box(); //.box() is used as mixins to inherit the property of box in profile
}
Algorithm
Step 1 − Before starting the code, install the less compiler using the above given approach. If you had already installed the “less” compiler then you can check using the following command on your CLI.
lessc –v
If the “less” compiler is installed on your computer you will get an output with its version.
Step 2 − Create a folder with the name “LESS” on the desktop. Create a HTML file in any text editor and write a HTML boilerplate code in it.
Step 3 − Create a “style.less” file in the same folder and write the code for styling the web page.
@textDecoration:underline;
@background:green;
@color:white;
@textAlign:center;
h1{
background-color: @background;
color: @color;
text-align: @textAlign;
padding: 1rem;
border-radius: 5px;
}
span{
text-decoration: @textDecoration;
}
Step 4 − Now use CLI to reach the subfolder, we have created this folder on the desktop. Use cd desktop, cd less command to reach the destination.
Step 5 − Now use the command to compile the “style.less” file.
lessc style.less > style.css
Step 6 − After compiling the file, “style.css” file is created successfully. Now the webpage is ready to load on the browser with the proper styling.
Example
In this example we will see that how a webpage looks when the less file is not compiled, and after compilation. So to achieve this we will create a web page with the css file linked and a “less” files in a folder.
<html>
<head>
<link rel="stylesheet" href="style.css">
<title>LESS Example</title>
<style>
@textDecoration:underline;
@background:green;
@color:white;
@textAlign:center;
h1{
background-color: @background;
color: @color;
text-align: @textAlign;
padding: 1rem;
border-radius: 5px;
}
span{
text-decoration: @textDecoration;
}
h1 {
background-color: green;
color: white;
text-align: center;
padding: 1rem;
border-radius: 5px;
}
span {
text-decoration: underline;
}
</style>
</head>
<body>
<h1>LESS</h1>
<h1>LESS stands for <span>(Leaner Style Sheets)</span></h1>
</body>
</html>
The given below image shows the output on compiling the “style.less”, when the web page was built and linked with css it shows the page which only displays the HTML part of the page without styling. After compiling the “style.less” file the styling written in the file is compiled and a style.css file is created which displays the given below output of the web page with proper styling.
Conclusion
The Leaner Style Sheets (LESS) are useful in code when we need to build a large project, because large projects need to maintain a large “css” file. So the “LESS” provides the feature of variable which does not make the code messy. It is easier to maintain the “LESS” code instead of “CSS” as if we want to change the styling of button on our website, suppose we have to change the border radius and background color of the button so instead of changing the style in every element of CSS we had to make just two changes in the “LESS” file variable which makes the work of developer easier.
425 Views
