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, themable 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.
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);
}
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, you may then redirect it to a file of your choice:
$ lessc styles.less > styles.css
To output minified CSS, simply pass the -x option. If you would like more involved minification, the Clean CSS is also available with the --clean-css option.
To see all the command line options run lessc without parameters.
Usage in Code
You can invoke the compiler from node, as such:
var less = require('less');
less.render('.class { width: (1 + 1) }', function (e, css) {
console.log(css);
});
which will output
.class {
width: 2;
}
you may also manually invoke the parser and compiler:
var parser = new(less.Parser);
parser.parse('.class { width: (1 + 1) }', function (err, tree) {
if (err) {
return console.error(err)
}
console.log(tree.toCSS());
});
Configuration
You may pass some options to the compiler:
var parser = new(less.Parser)({
paths: ['.', './lib'],
filename: 'style.less'
});
parser.parse('.class { width: (1 + 1) }', function (e, tree) {
tree.toCSS({
compress: true
});
});
Third party tools
See the Usage section for details of other tools.
Command-line With Rhino
Each less.js release contains also rhino-compatible version.
Command line rhino version requires two files:
- less-rhino-.js - compiler implementation,
- lessc-rhino-.js - command line support.
Command to run the compiler:
java -jar js.jar -f less-rhino-<version>.js lessc-rhino-<version>.js styles.less styles.css
This will compile styles.less file and save the result to styles.css file. The output file parameter is optional. If it is missing, less will output the result to stdout.
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>
Tips
- Make sure you include your stylesheets before the script.
- When you link more than one
.less stylesheet each of them is compiled independently. So any variables, mixins or namespaces you define in a stylesheet are not accessible in any other.
Browser Options
Options are defined by setting them on a global less object before the <script src="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>
Learn more about Browser Options
