- Home
- Blog
- Web Design Fast and Easy Way How to Quickly Set Up Less.js
Fast and Easy Way How to Quickly Set Up Less.js
-
William CraigCEO & Co-Founder
-
4 minute read
- President of WebFX. Bill has over 25 years of experience in the Internet marketing industry specializing in SEO, UX, information architecture, marketing automation and more. William’s background in scientific computing and education from Shippensburg and MIT provided the foundation for MarketingCloudFX and other key research and development projects at WebFX.
Less.js (or just Less) is a CSS preprocessor that can revolutionize the way you write CSS. And it’s easy to install and set up for web development.
There are several ways to install and configure Less, but for developing in the browser, or if you’re just interested in trying it out without having to install it on a web server, the fastest way is to reference the less.js
library in an HTML document. Let me show you how.
First, download Less.js from GitHub.
Alternatively: If you use Git, fire up the CLI, navigate to your project’s directory, and then clone the Less repo to your computer:
git clone https://github.com/less/less.js.git
There’s a lot of files and directories inside the less.js-master
directory when you open it but we’re only interested in what’s inside the dist
directory (which in open source lingo is short for “distribution” directory, the files for production use).
Inside the dist
directory you’ll find two JavaScript files: less.js
and less.min.js
— you can use either one.
less.js
is the commented version, which is great if you like reading source code.
less.min.js
is a minified version that has a smaller file size.
Put less.js
or less.min.js
in your project’s directory.
With your code editor or text editor:
- Create an HTML document.
- Create a Less stylesheet. It should have a file extension of
.less
. Example:styles.less
.
In the <head>
of your HTML document, reference your Less stylesheet and the Less JS file you placed in your project’s directory:
<head>
<link href="styles.less" type="text/css" rel="stylesheet/less"/>
<script src="less.js" type="text/javascript"></script>
</head>
Testing the Setup
You’re now ready to use Less.
To test your setup, you can write some Less syntax inside your Less stylesheet and then see if it renders correctly in your browser.
The Less CSS below uses Less variables and the Less saturation()
and desaturation()
color functions.
HTML
<!DOCTYPE html> <html> <head> <title>Less.js: Quick Setup</title> <link href="styles.less" type="text/css" rel="stylesheet/less"/> <script src="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
/* Variables */ @body-bg-color: #83b692; // green @text-color: #fff; // white @button-bg-color: #f9627d; // pink/* LESS CSS */ body { background: @body-bg-color; color: @text-color; font-family: sans-serif; text-align: center; } a:link, a:visited { background: @button-bg-color; color: @text-color; display: inline-block; padding: 10px 10px; text-decoration: none; } a:hover { background-color: desaturate(@button-bg-color, 50%); } a:active { background-color: saturate(@button-bg-color, 50%); }
Result
In-browser Error Hints
By default, Less will warn you whenever it encounters errors in the web page. This is useful during web development.
Compile Less CSS Before Deployment
Once development is complete, compile .less
files into regular .css
files. If you want to do this quick-and-dirty, you can use an online Less compiler.
The Less CSS above was compiled to the following by using LESSTESTER:
/* Variables */ /* LESS CSS */ body { background: #83b692; color: #ffffff; font-family: sans-serif; text-align: center; } a:link, a:visited { background: #f9627d; color: #ffffff; display: inline-block; padding: 10px 10px; text-decoration: none; } a:hover { background-color: #d08b97; } a:active { background-color: #ff5c79; }
Moving Forward with Less
Though the method described in this tutorial is the fastest way to get up and running with Less, it’s best used only for exploring, testing, and development because having the JavaScript library process your CSS every time a visitor requests your web page is bad for performance.
Once you’re ready to commit to Less and use it in your web development projects, the best options would be to install and set it up on the web server or to remove the less.js
library and compile your Less CSS to normal CSS.
Related Content
-
President of WebFX. Bill has over 25 years of experience in the Internet marketing industry specializing in SEO, UX, information architecture, marketing automation and more. William’s background in scientific computing and education from Shippensburg and MIT provided the foundation for MarketingCloudFX and other key research and development projects at WebFX.
-
WebFX is a full-service marketing agency with 1000+ client reviews and a 4.9-star rating on Clutch! Find out how our expert team and revenue-accelerating tech can drive results for you! Learn more
Make estimating web design costs easy
Website design costs can be tricky to nail down. Get an instant estimate for a custom web design with our free website design cost calculator!
Try Our Free Web Design Cost Calculator


Web Design Calculator
Use our free tool to get a free, instant quote in under 60 seconds.
View Web Design CalculatorMake estimating web design costs easy
Website design costs can be tricky to nail down. Get an instant estimate for a custom web design with our free website design cost calculator!
Try Our Free Web Design Cost Calculator