Menu

How to Quickly Set Up Less.js

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).

The dist folder inside less.js is where the production files are located.

Inside the dist directory you’ll find two JavaScript files: less.js and less.min.js — you can use either one.

The less.js and less.min.js files inside the "dist" directory.

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:

  1. Create an HTML document.
  2. 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="http://sixrevisions.com/tutorials/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

A Less.js browser setup test page

Download source files

In-browser Error Hints

By default, Less will warn you whenever it encounters errors in the web page. This is useful during web development.

Less errors

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

About the Author

Jacob Gube is the founder of Six Revisions. He’s a front-end web developer. Follow him on Twitter @sixrevisions.

This was published on Dec 10, 2014

7 Comments

invader365 Dec 11 2014

Hi guys,
When using less.js don’t forget to use anchorLess, the most extensive mixins library.
enjoy it ;)

http://invader365.github.io/anchorLESS/

LESS is a fantastic thing to use, as is SCSS. I was doubtful at first but both really do speed up web development. The way you nest the properties just makes it easier to find the styling for different sections.

I tend to use extensions and software to automatically compile the LESS into CSS every time I save the LESS file.

Victor Johnson Dec 15 2014

Less.js was just the solution I was looking. It was a huge pain to locate the source of error in css file. I hope this solves all the issues I face during designing websites.Many thanks for sharing this!I am going to try this out now!

John Thomas Feb 03 2015

Doesn’t SASS already let you do similar things?

http://sass-lang.com/guide

siddique Mar 26 2015

it work only mozila forefox,dont work in chrome why?
pls answer me
….

    Jacob Gube Mar 26 2015

    Not sure why that would be the case. This should also work in Chrome.

    sridhar May 26 2015

    You use apache tom cat it works in all type of browser

This comment section is closed. Please contact us if you have important new information about this post.


Partners