How to create a LESS file and how to compile it ?
Last Updated :
04 Oct, 2021
LESS (which stands for Leaner Style Sheets) is a backward-compatible language extension for CSS. CSS itself is great for defining styles and applying them to various HTML elements but it has a few limitations.
Limitations of CSS:
- Writing CSS code becomes exhausting, especially in big projects.
- Maintaining CSS code is difficult due to the lack of programming-like features like defining variables, nesting selectors, expressions, and functions.
There are several CSS preprocessors that try to address some of these shortcomings by supporting many features. LESS is one of them. It has additions such as variables, mixins, operations, and functions. They help make the code cleaner and easier to maintain.
Creating and Storing a LESS File:
Step 1: Go to your project folder, create 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
@green-color: #25C75C;
@light-color: #ebebeb;
@background-dark: #2b2b2b;
body {
font-family: 'Lucida Sans', Verdana, sans-serif;
margin: 25px;
background: @background-dark;
color: @light-color;
}
h1 {
color: @green-color;
}
a {
color: @green-color;
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
|
Compiling the LESS File
Step 1: Move to the project directory in your terminal and write the following command:
npm install less
Step 2: You can check if the compiler has been 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: 'Lucida Sans', Verdana, sans-serif;
margin: 25px;
background: #2b2b2b;
color: #ebebeb;
}
h1 {
color: #25C75C;
}
a {
color: #25C75C;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
|
Step 5: Now, you can link this CSS file to your HTML file.
gfg.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href="./css/styles.css">
</head>
<body>
<h1>Welcome to GeeksforGeeks</h1>
<p>
<a class="link" href=
This Link
</a> will take you to
the homepage of geeksforgeeks.
</p>
</body>
</html>
|
Output:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...