Less: Allowing You to Do More

Introduction

Less is a CSS pre-processor, meaning that it extends the CSS language, adding features that allow variables, mixins, functions and many other techniques that allow you to make CSS that is more maintainable, themeable and extendable.

Less runs inside Node, in the browser and inside Rhino. There are also many 3rd party tools that allow you to compile your files and watch for changes. The quickest place for first experiments with Less is our online editor.

For example:

@base: #f938ab;

.box-shadow(@style, @c) when (iscolor(@c)) {
-webkit-box-shadow: @style @c;
box-shadow: @style @c;
}

.box-shadow(@style, @alpha: 50%) when (isnumber(@alpha)) {
.box-shadow(@style, rgba(0, 0, 0, @alpha));
}

.box {
color: saturate(@base, 5%);
border-color: lighten(@base, 30%);
div { .box-shadow(0 0 5px, 30%) }
}

Compiles to:

.box {
color: #fe33ac;
border-color: #fdcdea;
}

.box div {
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

Using Less

Less can be used on the command line via npm, downloaded as a script file for the browser or used in a wide variety of third party tools. See the Usage section for more detailed information.

Installation

The easiest way to install Less on the server, is via npm, the node.js package manager, as so:

$ npm install -g less

Command-line Usage

Once installed, you can invoke the compiler from the command-line, as such:

$ lessc styles.less

This will output the compiled CSS to stdout. To save the CSS result to a file of your choice use:

$ lessc styles.less styles.css

To output minified CSS you can use the clean-css plugin. When the plugin is installed, a minified CSS output is specified with --clean-css option:

$ lessc --clean-css styles.less styles.min.css

Usage in Code

You can invoke the compiler from node, as such:

var less = require('less');
less.render('.class { width: (1 + 1) }', function (e, output) {
console.log(output.css);
});

Which will output:

.class {
width: 2;
}

Configuration

You may pass some options to the compiler:

var less = require('less');
less.render('.class { width: (1 + 1) }',
{

paths: ['.', './lib'], // Specify search paths for @import directives
filename: 'style.less', // Specify a filename, for better error messages
},

function (e, output) {
console.log(output.css);
});

Client-side Usage

Using less.js in the browser is great for development, but it's not recommended for production.

Client-side is the easiest way to get started and good for developing with Less, but in production, when performance and reliability is important, we recommend pre-compiling using node.js or one of the many third party tools available.

To start off, link your .less stylesheets with the rel attribute set to "stylesheet/less":

<link rel="stylesheet/less" type="text/css" href="styles.less"/>

Next, download less.js and include it in a <script></script> tag in the <head> element of your page:

<script src="less.js" type="text/javascript"></script>

Browser Options

Options are defined by setting them on a global less object before the <script src="less.js"></script>:

<!-- set options before less.js script -->
<script>
less = {
env: "development",
async: false,
fileAsync: false,
poll: 1000,
functions: {},
dumpLineNumbers: "comments",
relativeUrls: false,
rootpath: ":/a.com/"
};
</script>
<script src="less.js"></script>

Or for brevity they can be set as attributes on the script and link tags (requires JSON.parse browser support or polyfill).

<script src="less.js" data-poll="1000" data-relative-urls="false"></script>
<link data-dump-line-numbers="all" data-global-vars='{ myvar: "#ddffee", mystr: ""quoted"" }' rel="stylesheet/less" type="text/css" href="less/styles.less">

Resources

Visit the official Less Site for more information

Video Tutorials

Downloads

Download Script Download Source Clone or Fork

Install with Bower

bower install less

Less CDN

<script> src="//cdnjs.cloudflare.com/ ajax/libs/less.js/2.7.2/less. min.js"></script>

E-mail Sign-up

Sign up to get updates on progress and new versions


Email


Sign Up