Less.js, commonly referred to as Less, is a powerful CSS preprocessor designed to transform the process of writing CSS. It is both simple to install and configure, making it an ideal choice for web development projects.
There are various methods to install and configure Less, but for a quick setup, particularly for browser-based development or when experimenting without server installation, referencing the Less library directly in an HTML document is the most efficient approach. Let’s walk you through it.
Firstly, download Less.js from GitHub.
Alternatively, if you are using Git, you can initiate the command line interface, navigate to your project directory, and clone the Less repository to your computer:
Upon opening the repository, you will find numerous files and directories, but your focus should be on the contents of the ‘dist’ directory, which is colloquially known as the ‘distribution’ directory and contains the files for production use.
Within the ‘dist’ directory, you will find two JavaScript files: ‘less.js’ and ‘less.min.js’. You can utilize either of them.
‘less.js’ is the uncommented version, ideal if you prefer reading the source code.
‘less.min.js’ is a minified version, offering a smaller file size.
Place either ‘less.js’ or ‘less.min.js’ into your project directory.
Using your code editor or text editor:
Create an HTML document.
Create a Less stylesheet with a .less file extension. For example, ‘styles.less’.
In the head section of your HTML document, reference your Less stylesheet and the Less JS file you’ve placed in your project directory:
<head>
<link href=”styles.less” type=”text/css” rel=”stylesheet/less”>
<script src=”less.js” type=”text/javascript”></script>
</head>
You are now ready to utilize Less.
To test your setup, include some Less syntax within your Less stylesheet and observe if it renders correctly in your browser.
The provided Less CSS incorporates Less variables and the color functions ‘mix’ and ‘darken’.
HTML
<!DOCTYPE html> <html> <head> <title>Less.js: Quick Setup</title> <link href=”https://www.webfx.com/blog/web-design/set-up-less-js/styles.less” type=”text/css” rel=”stylesheet/less”> <script src=”https://www.webfx.com/blog/web-design/set-up-less-js/less.js” type=”text/javascript”></script></head> </body> <h1>Less.js: Quick Setup</h1> <p><a href=”https://www.webfx.com/blog/web-design/set-up-less-js/”>Read the tutorial</a></p> </body> </html>
LESS
Result
Download source files
By default, Less will alert you to errors on the web page, which is particularly beneficial during the development phase.
Upon completing development, compile your .less files into standard .css files. For a rapid compilation, you can use an online Less compiler.
The Less CSS example was compiled to the following using LESSTESTER:
Although the method outlined in this tutorial is the quickest way to start using Less, it is best suited for exploration, testing, and development purposes only. Processing CSS with the JavaScript library each time a visitor requests your webpage can negatively impact performance.
Once you are ready to integrate Less into your web development projects, the optimal approach would be to install and configure it on your web server or remove the library and compile your Less CSS into regular CSS.
CSS Development at Large-Scale Websites
Speed Up Your Web Development Workflow with Grunt
Native App vs. Mobile Web App: A Quick Comparison
5 Standardized Methods for Writing CSS
