How to create a LESS file and how to compile it ?
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:
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:
Step 3: Move to the css subfolder (or the folder where the less file is stored)
Step 4: Write the following command:
lessc styles.less styles.css
A new file named styles.css will be created with the following content :
Step 5: Now, you can link this CSS file to your HTML file.