Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

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=
            "https://www.geeksforgeeks.org/">
            This Link
        </a> will take you to
        the homepage of geeksforgeeks.
    </p>
</body>
  
</html>

Output:




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!