Mr Branding: How to Quickly Set Up Less.js

Wednesday, December 10, 2014

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 http://ift.tt/1zNV95d

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:

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="http://ift.tt/1D8Rh4F 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.