The dynamic stylesheet language. http://lesscss.org.
Options for adding Less.js to your project:
- Install with NPM:
npm install less
- Download the latest release
- Clone the repo:
git clone git://github.com/less/less.js.git
LESS extends CSS with dynamic features such as:
Take advantage of nesting to make code more readable and maintainable. This:
.nav > li > aborder: 1px solid #f5f5f5;&:hoverborder-color: #ddd;
Updated commonly used values from a single location.
// Variables ("inline" comments like this can be used)@link-color: #428bca; // appears as "sea blue"/* Or "block comments" that spanmultiple lines, like this */acolor: @link-color; // use the variable in styles
Variables can also be used in
@import statements, URLs, selector names, and more.
Continuing with the same example above, we can use our variables even easier to maintain with operations, which enables the use of addition, subraction, multiplication and division in your styles:
// Variables@link-color: #428bca;@link-color-hover: darken@link-color, 10%;// Stylesacolor: @link-color;a:hovercolor: @link-color-hover;
Mixins enable you to apply the styles of one selector inside another selector like this:
// Any "regular" class....linkcolor: @link-color;afont-weight: bold;.link; // ...can be used as an "implicit" mixin
So any selector can be an "implicit mixin". We'll show you a DRYer way to do this below.
Mixins can also accept parameters:
// Transition mixin.transition@transition-webkit-transition: @transition;-moz-transition: @transition;-o-transition: @transition;transition: @transition;
used like this:
afont-weight: bold;color: @link-color;.transitioncolor .2s ease-in-out;// Hover state&:hovercolor: @link-color-hover;
extend feature can be thought of as the inverse of mixins. It accomplishes the goal of "borrowing styles", but rather than copying all the rules of Selector A over to Selector B,
extend copies the name of the inheriting selector (Selector B) over to the extending selector (Selector A). So continuing with the example used for mixins above, extend works like this:
.linkcolor: @link-color;a:extend.linkfont-weight: bold;// Can also be written asa&:extend.link;font-weight: bold;
Compiling and Parsing
Invoke the compiler from node:
var less = ;less;
You may also manually invoke the parser and compiler:
var parser = newlessParser;parser;
You may also pass options to the compiler:
var parser = newlessParserpaths: '.' './src/less' // Specify search paths for @import directivesfilename: 'style.less' // Specify a filename, for better error messages;parser;
Here are other resources for using Less.js:
- stackoverflow.com is a great place to get answers about Less.
- node.js tools for converting Less to CSS
- GUI compilers for Less
- Less.js Issues for reporting bugs
Before opening any issue, please search for existing issues and read the Issue Guidelines, written by Nicolas Gallagher. After that if you find a bug or would like to make feature request, please open a new issue.
Start by either downloading this project manually, or in the command line:
git clone https://github.com/less/less.js.git "less"
To install all the dependencies for less development, run:
If you haven't run grunt before, install grunt-cli globally so you can just run
npm install grunt-cli -g
You should now be able to build Less.js, run tests, benchmarking, and other tasks listed in the Gruntfile.
Using Less.js Grunt
Tests, benchmarking and building is done using Grunt
~0.4.1. If you haven't used Grunt before, be sure to check out the Getting Started guide, as it explains how to install and use Grunt plugins, which are necessary for development with Less.js.
The Less.js Gruntfile is configured with the following "convenience tasks" :
Runs jshint, nodeunit and headless jasmine tests using phantomjs. You must have phantomjs installed for the jasmine tests to run.
Runs the benchmark suite.
build for testing browser - 'grunt browser'
This builds less.js and puts it in 'test/browser/less.js'
grunt stable | grunt beta | grunt alpha
Builds Less.js from from the
/lib/less source files. This is done by the developer releasing a new release, do not do this if you are creating a pull request.
Build the README file from a template to ensure that metadata is up-to-date and (more likely to be) correct.
Please review the Gruntfile to become acquainted with the other available tasks.
Please note that if you have any issues installing dependencies or running any of the Gruntfile commands, please make sure to uninstall any previous versions, both in the local node_modules directory, and clear your global npm cache, and then try running
npm install again. After that if you still have issues, please let us know about it so we can help.
See the changelog