Home >Web Front-end >HTML Tutorial >How to create a LESS file and how to compile it
How to create a LESS file and how to compile it
- WBOYforward
- 2023-09-13 16:29:06867browse
Overview
aLeaner Style Sheets (LESS) is a dynamic preprocessing language whose basic language is Cascading Style Sheets (CSS). All preprocessing languages are upgraded versions of the base language, so LESS also has many additional features. LESS has functions such as variables, parent selectors, mixins, and nested selectors. In Java, compiling the source code of the ".java" file will generate the output file ".class". Similarly, compiling the source code of the LESS file will generate the output file ".less ” file will generate a new file “.css” as output.
method
To create and compile LESS files we need to follow the following steps -
Open a terminal on your desktop or command line (cmd). Use the Node Package Manager (npm) to globally install the Learner Stylesheet (LESS) environment to your computer.
npm install less –g
Create a folder on your desktop. Now open any text editor and write LESS code in it.
Save the file containing the ".less" code as "style.less".
Now open the command line interface (CLI) and use the command cd folder name to reach the subfolder where you created the "style.less" file. "cd" means change directory.
After reaching the folder where the less file is located, enter the following command to compile "style.less", which will generate a "style.css" "document.
lessc style.less > style.css
Open the file "style.css", the code in it will be the converted css code of the "style.less" file.
Features
The main features of Leaner Style Sheets (LESS) are −
Variables− Less language has a feature to create variables and store CSS property values in them. The prefix for creating variables in the less file is "@". For example: @width:10rem, @height:10rem, @background: green, etc.
Mixing− This feature provides the ability to write style code without duplication. We can reuse the styles created above as styles for other elements.
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 you start writing code, install the less compiler using the method provided above. If you have the "less" compiler installed, you can check it on the command line interface using the following command.
lessc –v
If you have the "less" compiler installed on your computer, you will get output with its version number.
Step 2 − Create a folder named "LESS" on the desktop. Create an HTML file in any text editor and write 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 the command line interface (CLI) to go into the subfolder we have created on the desktop. Use cd desktop, cd less commands 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, the "style.css" file was successfully created. Now the web page is ready to load into the browser with the appropriate styling.
Example
In this example, we will see what the web page looks like when the less file is not compiled, and what it looks like after it is compiled. To achieve this, we will create a web page that links the css files and the "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 image given below shows the output while compiling "style.less", when the web page is built and linked with css, it shows the page showing only the HTML part without the styles. After compiling the "style.less" file, the styles written in the file are compiled and a style.css file is created which displays the output of the web page with appropriate styles given below.
in conclusion
LESS style sheets (LESS) are very useful when building large projects that require maintaining a huge "css" file. Therefore, "LESS" provides the functionality of variables, which can avoid code clutter. It is easier to maintain "LESS" code compared to "CSS", for example, if we want to change the style of a button on the website, let's say we need to change the border radius and background color of the button, then we only need to Making two changes in a variable instead of making style changes in every CSS element makes the developer's life easier.
The above is the detailed content of How to create a LESS file and how to compile it. For more information, please follow other related articles on the PHP Chinese website!