Edit the markdown source for "v2-upgrade"

Language Changes

Colours now output as they are written, so purple stays as purple and is not converted to its hex representation.

Command Line Usage

Clean CSS

We have removed the dependency on clean css and moved it to a plugin. This allows us to:

1. update the dependency and integration without a less release
2. not tie people who do not use clean css into having it downloaded by npm.

The usage is similar, just install the plugin (npm install -g less-plugin-clean-css) then tell less to use it by using the --clean-css argument.

# old
lessc --clean-css --clean-option=--compatibility:ie8 --clean-option=--advanced
# new
lessc --clean-css="--compatibility=ie8 --advanced"

Sourcemaps

We have improved the source map options and path generation so the sourcemap should be generated at the correct path without specifying any options.

Programmatic Usage

We have deprecated the use of less.Parser and toCss to generate the css. Instead we require you to use the less.render shorthand. See Programmatic Usage for more information.

Further, instead of returning a string which is the css, we return an object with a css field set to the string and a map field set to the sourcemap (if applicable).

The sourcemap options are now to be set on sourceMap instead of directly on options. So instead of options.sourceMapFullFilename = you would set options.sourceMap = { sourceMapFullFilename:.

Browser Usage

The browser usage has not changed significantly. Options set on the less object are exposed as less.options after the less script has run, rather than polluting less.

It is now possible to specify options on the script and less tags, which should simplify option setting in the browser. See the browser usage section for more information.

Edit the markdown source for "command-line-usage"

Compile .less files to .css using the command line

Heads up! If the command line isn't your thing, learn more about GUIs for Less.

Installing lessc for Use Globally

Install with npm

npm install less -g

and then you will have the lessc command available globally. For a specific version (or tag) you can add @VERSION after our package name, e.g. npm install less@1.6.2 -g.

Installing for Node Development

Alternatively if you don't use the compiler globally, you may be after

npm i less --save-dev

This will install the latest official version of lessc in your project folder, also adding it to the devDependencies in your project's package.json.

Note that a caret version range will be automatically specified in package.json. This is good, as new minor releases of the latest version will be installable by npm.

Beta releases of lessc

Periodically, as new functionality is being developed, lessc builds will be published to npm, tagged as beta. These builds will not be published as a @latest official release, and will typically have beta in the version (use lessc -v to get current version).

Since patch releases are non-breaking we will publish patch releases immediately and alpha/beta/candidate versions will be published as minor or major version upgrades (we endeavour since 1.4.0 to follow semantic versioning).

Installing an unpublished development version of lessc

If you want to install a bleeding-edge, unpublished version of lessc, follow the instructions for specifying a git URL as a dependency and be sure to specify an actual commit SHA (not a branch name) as the commit-ish. This will guarantee that your project always uses that exact version of lessc.

The specified git URL may be that of the official lessc repo or a fork.

Server-Side and Command Line Usage

The binary included in this repository, bin/lessc works with Node.js on *nix, OS X and Windows.

Usage: lessc [option option=parameter ...] <source> [destination]

Command Line Usage

lessc [option option=parameter ...] <source> [destination]

If source is set to `-' (dash or hyphen-minus), input is read from stdin.

Examples

# compile bootstrap.less to bootstrap.css
$ lessc bootstrap.less bootstrap.css

# compile bootstrap.less to bootstrap.css and minify (compress) the result
$ lessc -x bootstrap.less bootstrap.css

Options

Help

lessc --help
lessc -h

Prints a help message with available options and exits.

Include Paths

lessc --include-path=PATH1;PATH2

Sets available include paths. Separated by ':' or ';' on Windows.

If the file in an @import rule does not exist at that exact location, less will look for it at the location(s) passed to this option. You might use this for instance to specify a path to a library which you want to be referenced simply and relatively in the less files.

In node, set a paths option

{ paths: ['PATH1', 'PATH2']  }

Makefile

lessc -M
lessc --depends

No Color

lessc --no-color

No IE Compatibility

lessc --no-ie-compat

Currently only used for the data-uri function to ensure that images aren't created that are too large for the browser to handle.

Disable JavaScript

lessc --no-js

Lint

lessc --lint
lessc -l

Runs the less parser and just reports errors without any output.

Silent

lessc -s
lessc --silent

Stops any warnings from being shown.

Strict Imports

lessc --strict-imports

Allow Imports from Insecure HTTPS Hosts

lessc --insecure

Version

lessc -v
lessc --version

Compress

lessc -x
lessc --compress

Compress using less built-in compression. This does an okay job but does not utilise all the tricks of dedicated css compression. Please feel free to improve our compressed output with a pull request.

Clean CSS

In v2 of less, Clean CSS is no longer included as a direct dependency. To use clean css with lessc, use the clean css plugin.

Source Map Output Filename

lessc --source-map
lessc --source-map=file.map

Tells less to generate a sourcemap. If you have the sourcemap option without a filename it will use the source less file name but with the extension map.

Source Map Rootpath

lessc --source-map-rootpath=dev-files/

Specifies a rootpath that should be prepended to each of the less file paths inside the sourcemap and also to the path to the map file specified in your output css.

Because the basepath defaults to the directory of the input less file, the rootpath defaults to the path from the sourcemap output file to the base directory of the input less file.

Use this option if for instance you have a css file generated in the root on your web server but have your source less/css/map files in a different folder. So for the option above you might have

output.css
dev-files/output.map
dev-files/main.less

Source Map Basepath

lessc --source-map-basepath=less-files/

This is the opposite of the rootpath option, it specifies a path which should be removed from the output paths. For instance if you are compiling a file in the less-files directory but the source files will be available on your web server in the root or current directory, you can specify this to remove the additional less-files part of the path.

It defaults to the path to the input less file.

Source Map Less Inline

lessc --source-map-less-inline

This option specifies that we should include all of the Less files in to the sourcemap. This means that you only need your map file to get to your original source.

This can be used in conjunction with the map inline option so that you do not need to have any additional external files at all.

Source Map Map Inline

lessc --source-map-map-inline

This option specifies that the map file should be inline in the output CSS. This is not recommended for production, but for development it allows the compiler to produce a single output file which in browsers that support it, use the compiled css but show you the non-compiled less source.

Source Map URL

lessc --source-map-url=../my-map.json

Allows you to override the URL in the css that points at the map file. This is for cases when the rootpath and basepath options are not producing exactly what you need.

Rootpath

lessc -rp=resources/
lessc --rootpath=resources/

Allows you to add a path to every generated import and url in your css. This does not affect less import statements that are processed, just ones that are left in the output css.

For instance, if all the images the css use are in a folder called resources, you can use this option to add this on to the URL's and then have the name of that folder configurable.

Relative URLs

lessc -ru
lessc --relative-urls

By default URLs are kept as-is, so if you import a file in a sub-directory that references an image, exactly the same URL will be output in the css. This option allows you to re-write URL's in imported files so that the URL is always relative to the base imported file. E.g.

# main.less
@import "files/backgrounds.less";
# files/backgrounds.less
.icon-1 {
  background-image: url('images/lamp-post.png');
}

this will output the following normally

.icon-1 {
  background-image: url('images/lamp-post.png');
}

but with this option on it will instead output

.icon-1 {
  background-image: url('files/images/lamp-post.png');
}

You may also want to consider using the data-uri function instead of this option, which will embed images into the css.

Strict Math

lessc -sm=on
lessc --strict-math=on

Defaults to Off.

Without this option on Less will try and process all maths in your css e.g.

.class {
  height: calc(100% - 10px);
}

will be processed currently.

With strict math on, only maths that is inside un-necessary parenthesis will be processed. For instance.

.class {
  width: calc(100% - (10px  - 5px));
  height: (100px / 4px);
  font-size: 1 / 4;
}

.class {
  width: calc(100% - 5px);
  height: 25px;
  font-size: 1 / 4;
}

We originally planned to default this to true in the future, but it has been a controversial option and we are considering whether we have solved the problem in the right way, or whether less should just have exceptions for instances where / is valid or calc is used.

Strict Units

lessc -su=on
lessc --strict-units=on

Defaults to off.

Without this option, less attempts to guess at the output unit when it does maths. For instance

.class {
  property: 1px * 2px;
}

In this case, things are clearly not right - a length multiplied by a length gives an area, but css does not support specifying areas. So we assume that the user meant for one of the values to be a value, not a unit of length and we output 2px.

With strict units on, we assume this is a bug in the calculation and throw an error.

Global Variable

lessc --global-var="my-background=red"

This option defines a variable that can be referenced by the file. Effectively the declaration is put at the top of your base Less file, meaning it can be used but it also can be overridden if this variable is defined in the file.

Modify Variable

lessc --modify-var="my-background=red"

As opposed to the global variable option, this puts the declaration at the end of your base file, meaning it will override anything defined in your Less file.

URL Arguments

lessc --url-args="cache726357"

This option allows you to specify a argument to go on to every URL. This may be used for cache-busting for instance.

Line Numbers

lessc --line-numbers=comments
lessc --line-numbers=mediaquery
lessc --line-numbers=all

Generates inline source-mapping. This was the only option before browsers started supporting sourcemaps. We are consider deprecating, so please get in touch if you want this option to stick around.

Plugin

lessc --clean-css
lessc --plugin=clean-css="advanced"

--plugin Loads a plugin. You can also omit the --plugin= if the plugin begins less-plugin. E.g. the clean css plugin is called less-plugin-clean-css once installed (npm install less-plugin-clean-css), use either with --plugin=less-plugin-clean-css or just --clean-css specify options afterwards e.g. --plugin=less-plugin-clean-css="advanced" or --clean-css="advanced"

Edit the markdown source for "using-less-in-the-browser"

We recommend using less in the browser only for development or when you need to dynamically compile less and cannot do it serverside. This is because less is a large javascript file and compiling less before the user can see the page means a delay for the user. In addition, consider that mobile devices will compile slower. For development consider if using a watcher and live reload (e.g. with grunt or gulp) would be better suited.

To use less in the browser, you firstly need to include the less script.

<!-- Here: include any less plugin scripts, any required browser shims and optionally set less = any options  -->
<script src="less.js"></script>

This will find any less style tags on the page

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

and create style tags with the compiled css synchronously.

Setting Options

You can set options either programmatically, by setting them on a less object before the script tag - this then effects all initial link tags and programmatic usage of less.

<script>
  less = {
    env: "development"
  };
</script>
<script src="less.js"></script>

The other way is to specify the options on the script tag, e.g.

<script>
  less = {
    env: "development"
  };
</script>
<script src="less.js" data-env="development"></script>

And you can also do this on link tags to override certain settings (some less settings like verbose are global and can not be overridden).

<link data-dump-line-numbers="all" data-global-vars='{ "myvar": "#ddffee", "mystr": "\"quoted\"" }' rel="stylesheet/less" type="text/css" href="less/styles.less">

The important points for attribute options are..

• importance level: window.less < script tag < link tag
• data attributes names are not camelCase (e.g logLevel -> data-log-level)
• link tag options are just render time options (e.g verbose, logLevel ... are not supported)
• non-string data attributes values should be JSON valid (e.g use double quotes instead of single quotes like in data-global-vars='{ "myvar": "#ddffee", "mystr": "\"quoted\"" }')

Watch Mode

To enable Watch mode, option env must be set to development. Then AFTER the less.js file is included, call less.watch(), like this:

<script>less = { env: 'development'};</script>
<script src="less.js"></script>
<script>less.watch();</script>

Alternatively, you can enable Watch mode temporarily by appending #!watch to the URL.

Modify Variables

Enables run-time modification of Less variables. When called with new values, the Less file is recompiled without reloading. Simple basic usage:

less.modifyVars({
  '@buttonFace': '#5B83AD',
  '@buttonText': '#D9EEF2'
});

Debugging

It is possible to output rules in your CSS which allow tools to locate the source of the rule.

Either specify the option dumpLineNumbers as above or add !dumpLineNumbers:mediaquery to the url.

You can use the mediaquery option with FireLESS (it is identical to the SCSS media query debugging format). Also see FireLess and Less v2. The comment option can be used to display file information and line numbers in the inline compiled CSS code.

Options

Set options in a global less object before loading the less.js script:

<!-- set options before less.js script -->
<script>
  less = {
    env: "development",
    logLevel: 2,
    async: false,
    fileAsync: false,
    poll: 1000,
    functions: {},
    dumpLineNumbers: "comments",
    relativeUrls: false,
    globalVars: {
      var1: '"string value"',
      var2: 'regular value'
    },
    rootpath: ":/a.com/"
  };
</script>
<script src="less.js"></script>

async

Type: Boolean

Default: false

Whether to request the import files with the async option or not. See fileAsync.

dumpLineNumbers

Type: String Options: ''| 'comments'|'mediaquery'|'all' Default: ''

When set, this adds source line information to the output css file. This helps you debug where a particular rule came from.

The comments option is used for outputting user-understandable content, whilst mediaquery is for use with a firefox extension which parses the css and extracts the information.

In the future we hope this option to be superseded by sourcemaps.

env

Type: String Default: depends on page URL

Environment to run may be either development or production.

In production, your css is cached in local storage and information messages are not output to the console.

If the document's URL starts with file:// or is on your local machine or has a non standard port, it will automatically be set to development.

e.g.

less = { env: 'production' };

errorReporting

Type: String

Options: html|console|function

Default: html

Set the method of error reporting when compilation fails.

fileAsync

Type: Boolean

Default: false

Whether to request the import asynchronously when in a page with a file protocol.

functions

Type: object

User functions, keyed by name.

e.g.

less = {
    functions: {
        myfunc: function() {
            return new(less.tree.Dimension)(1);
        }
    }
};

and it can be used like a native Less function e.g.

.my-class {
  border-width: unit(myfunc(), px);
}

logLevel

Type: Number

Default: 2

The amount of logging in the javascript console. Note: If you are in the production environment you will not get any logging.

2 - Information and errors
1 - Errors
0 - Nothing

poll

Type: Integer

Default: 1000

The amount of time (in milliseconds) between polls while in watch mode.

relativeUrls

Type: Boolean

Default: false

Optionally adjust URLs to be relative. When false, URLs are already relative to the entry less file.

globalVars

Type: Object

Default: undefined

List of global variables to be injected into the code. Keys of the object are variables names, values are variables values. Variables of "string" type must explicitly include quotes if needed.

E.g.

less.globalVars = { myvar: "#ddffee", mystr: "\"quoted\"" };

This option defines a variable that can be referenced by the file. Effectively the declaration is put at the top of your base Less file, meaning it can be used but it also can be overridden if this variable is defined in the file.

modifyVars

Type: Object

Default: undefined

Same format as globalVars.

As opposed to the globalVars option, this puts the declaration at the end of your base file, meaning it will override anything defined in your Less file.

rootpath

Type: String

Default: false

A path to add on to the start of every URL resource.

useFileCache

Type: Boolean

Default: true (previously false in before v2)

Whether to use the per session file cache. This caches less files so that you can call modifyVars and it will not retrieve all the less files again. If you use the watcher or call refresh with reload set to true, then the cache will be cleared before running.

Edit the markdown source for "browser-support"

Less only supports running on modern browsers (recent versions of Chrome, Firefox, Safari and IE). While it is possible to use LESS on the client side in production, please be aware that there are performance implications for doing so (although the latest releases of LESS are quite a bit faster). Also, sometimes cosmetic issues can occur if a JavaScript error occurs. This is a trade off of flexibility vs. speed. For the fastest performance possible for a static web site, we recommend compiling LESS on the server side.

Note that PhantomJS does not currently implement Function.prototype.bind so you will require a es-5 shim for this function to run under PhantomJS (We use PhantomJS for tests and we append an es5-shim to make it work).

There are reasons to use client-side less in production, such as if you want to allow users to tweak variables which will affect the theme and you want to show it to them in real-time - in this instance a user is not worried about waiting for a style to update before seeing it.

If you need to run less in an older browser, please use an es-5 shim which will add the javascript features that less requires.

In addition, if you use options as attributes on the script or link tags, you will require browser support for JSON.parse or an appropriate polyfill.

Edit the markdown source for "plugins"

How do I use a plugin?

Command Line

If you are using lessc, the first thing you need to do is install that plugin. We recommend the plugin starts with "less-plugin" though that isn't required. For the clean-css plugin you would install with

npm install less-plugin-clean-css

To use the plugin, if you specify a unrecognised option, we attempt to load that, for example

lessc --clean-css="advanced"

Will use the plugin you just installed. You can also be more direct, for example

lessc --plugin=path_to_plugin=options

Using a Plugin in Code

In Node, require the plugin and pass it to less in an array as an option plugins. E.g.

var myPlugin = require("my-plugin");
less.render(myCSS, { plugins: [myPlugin] })
   .then(function(output) {
    },
    function(error) {
    });

In the Browser

Plugin authors should provide a javascript file, just include that in the page before the less.js script.

<script src="plugin.js"></script>
<script>
less = { 
    plugins: [plugin]
};
</script>  
<script src="less.min.js"></script>

List of Less Plugins

Available Less plugins. Find more at the NPM Registry

Postprocessor/Feature Plugins

Autoprefixer	Add vendor prefixes
CSScomb	Beautify/format
clean-css	Compress/minify
CSSWring	Compress/minify
css-flip	Generate left-to-right (LTR) or right-to-left (RTL) CSS
functions	Write custom Less functions in Less itself
glob	Globbing support in Less imports
group-css-media-queries	Group CSS media queries
inline-urls	Convert url() to a call to data-uri()
lesshint	Lint your Less
npm-import	Import from npm packages
pleeease	Postprocess using pleeease
rtl	Reverse from ltr to rtl

Framework/Library Importers

Bootstrap	import Bootstrap
Bower Resolve	import from a Bower package
Cardinal CSS for less.js	import Cardinal
Flexbox Grid	import Flexbox Grid
Flexible Grid System	import Flexible Grid System
Ionic	import Ionic
Lesshat	import Lesshat
Skeleton	import Skeleton

Function Libraries

advanced-color-functions	Some advanced colour functions that helps in finding more contrasting
cubehelix	cubehelix(y,a,b,t) function returns a color between the two colors a and b, using a gamma correction value of 1
lists	Lists/arrays manipulation functions library

For Plugin Authors

Less supports some entry points that allow an author to integrate with less. We may add some more in the future.

The plugin itself has a very simple signature, like this

{
    install: function(less, pluginManager) {
    },
    minVersion: [2, 0, 0] /* optional */
}

So, the plugin gets the less object, which in v2 has more classes on it (making it easy to extend), a plugin manager which provides some hooks to add visitors, file managers and post processors.

If your plugin supports lessc, there are a few more details and the signature looks like this

{
    install: function(less, pluginManager) {
    },
    setOptions: function(argumentString) { /* optional */
    },
    printUsage: function() { /* optional */
    },
    minVersion: [2, 0, 0] /* optional */
}

The additions are the setOptions function which passes the string the user enters when specifying your plugin and also the printUsage function which you should use to explain your options and how the plugin works.

Here are some example repos showing the different plugin types:

• post-processor: https://github.com/less/less-plugin-clean-css
• visitor: https://github.com/less/less-plugin-inline-urls
• file-manager: https://github.com/less/less-plugin-npm-import

Note: Plugins are different from creating a version of less for a different environment but they do have similarities, for example node provides 2 file managers by default and browser provides one and that is the main step in getting less to run within a specific environment. The plugin allows you to add file managers.

Edit the markdown source for "programmatic-usage"

The main entry point into less is the less.render function. This takes the following format

less.render(lessInput, options)
    .then(function(output) {
        // output.css = string of css
        // output.map = string of sourcemap
        // output.imports = array of string filenames of the imports referenced
    },
    function(error) {
    });

// or...

less.render(css, options, function(error, output) {})

The options argument is optional. If you specify a callback then a promise will not be returned, where as if you do not specify a callback a promise will be given. Under the hood, the callback version is used so that less can be used synchronously.

If you wanted to render a file, you would first read it into a string (to pass to less.render) and then set the filename field on options to be the filename of the main file. less will handle all the processing of the imports.

The sourceMap option is an object which enables you to set sub sourcemap options. Available sub options are: sourceMapURL,sourceMapBasepath,sourceMapRootpath,outputSourceFiles and sourceMapFileInline. Notice that the sourceMap option is not available for the less.js in browser compiler now.

less.render(lessInput)
    .then(function(output) {
        // output.css = string of css
        // output.map = undefined
}
//,
less.render(lessInput, {sourceMap: {}})
    .then(function(output) {
        // output.css = string of css
        // output.map = string of sourcemap
}
//or,
less.render(lessInput, {sourceMap: {sourceMapFileInline: true}})
    .then(function(output) {
        // output.css = string of css \n /*# sourceMappingURL=data:application/json;base64,eyJ2ZXJ..= */
        // output.map = undefined
}

Previously we also recommended creating a less.Parser and then calling toCSS on the result. However this had 2 serious drawbacks - it meant that our parser was in fact tied to all of less and 2nd it meant that the toCSS call had to be synchronous.

You can still get the less parse tree, but it requires more steps. You can see how this is done in the render function but we do not support using less in this way and may change this function in a minor release version bump (we will not break it in a patch release).

Getting Access to the Log

You can add a log listener with the following code

less.logger.addListener({
    debug: function(msg) {
    },
    info: function(msg) {
    },
    warn: function(msg) {
    },
    error: function(msg) {
    }
});

Note: all functions are optional. An error will not be logged, but instead is passed back to the callback or promise in less.render

Edit the markdown source for "online-less-compilers"

less2css.org

Online Integrated Development Environment (IDE) that is hosted in a browser allowing users to edit and compile Less to CSS in real-time.

winless.org/online-less-compiler

This Online Less Compiler can help you to learn Less. You can go through the examples below or try your own Less code.

lesstester.com

Online compiler for Less CSS.

dopefly.com/less-converter

A simple Less CSS file converter using the Less JS project.

lessphp.gpeasy.com/demo

less.php live demo.

leafo.net/lessphp/editor

lessphp live demo.

precess

A real time preprocesser compiler.

estFiddle

Online Less compiler providing live demo for Less and est. Allowing users to switch among all versions of Less after 1.4.0 with optional est/Autoprefixer functionalities.

ILess

Live demo of ILess PHP compiler

BeautifyTools Less Compiler

Online Less compiler with optional formatting and minification at BeautifyTools

Online Web IDEs/Playgrounds with Less support

CSSDeck Labs

CSSDeck Labs is a place where you can quickly create some experiments (or testcases) that involves HTML, CSS, JS code.

CodePen

CodePen is a playground for the front end side of the web.

Fiddle Salad

An online playground with an instantly ready coding environment.

JS Bin

JS Bin is a webapp specifically designed to help JavaScript and CSS folk test snippets of code.

jsFiddle

Online Web Editor

Edit the markdown source for "guis-for-less"

Tip: try out the different Less tools available for your platform to see which one meets your needs.

This page focuses on GUI compilers. For command line usage and tools see Command Line Usage.

Cross platform

Crunch 2!

The editor and compiler for awesome people.

Crunch 2 is a cross-platform (Windows, Mac, and Linux) editor with integrated compiling. If you work with large Less projects, you should definitely try it out, as you only need the free version for Less files. Available at: https://getcrunch.co/.

Mixture

A rapid prototyping and static site generation tool for designers and developers

Mixture brings together a collection of awesome tools and best practices. It's quick, no-fuss, super-powerful and works with your favourite editor.

Get more info: http://mixture.io/

SimpLESS

SimpLESS is a minimalistic Less compiler. Just drag, drop and compile.

One of the unique features of SimpLESS is that it supports 'prefixing' your CSS by using http://prefixr.com.. SimpLESS is built on the Titanium platform. Get more info: http://wearekiss.com/simpless

Koala

Koala is a cross-platform GUI application for compiling less, sass and coffeescript.

Features: cross platform, compile error notification supports and compile options supports.

Get more info: http://koala-app.com/

Prepros

Prepros is a tool to compile LESS, Sass, Compass, Stylus, Jade and much more.

Get more info at https://prepros.io/

Specific platforms

Windows

WinLess

WinLess started out as a clone of Less.app, it takes a more feature-complete approach and has several settings. It also supports starting with command line arguments.

Get more info: http://winless.org

OS X

CodeKit

CodeKit is the successor to LESS.app, and supports Less among many other preprocessing languages, such as SASS, Jade, Markdown, and many more.

Get more info: http://incident57.com/codekit

LiveReload

CSS edits and image changes apply live. CoffeeScript, SASS, Less and others just work.

Get more info: http://livereload.com

Linux

Plessc

Plessc is a gui fronted made with PyQT.

Auto compile, log viewer, open the less file with the editor chosen, settings for compile the file. Get more info: https://github.com/Mte90/Plessc

Edit the markdown source for "editors-and-plugins"

Also see: GUIs for Less.js

Editors and IDEs

• Crunch 2! (built-in compiling, debugging, and searching across @imports)
• Mindscape Web Workbench (built-in support)
• NetBeans (built-in syntax highlighting)
• TextMate
• Vim
• Emacs
• jetBrains WebStorm and PhpStorm (built-in support)
• Brackets (built-in syntax highlighting, several extensions for compilation)
• CodeLobster (built-in syntax highlighting)
• KineticWing IDE (built-in support)
• nodeMirror (built-in support, built-in HTML/CSS/Less preview)
• HTML-Kit Tools (built-in support)

Sublime Text 2 & 3

• Less-sublime
• Sublime-Less-to-CSS
• Less-build-sublime
• SublimeOnSaveBuild

Eclipse

• Eclipse Less Plugin by Vincent Simonet
• Transpiler Plugin by Thomas Gossmann

Komodo Edit/IDE

• Komodo Less Compiler by Bob de Haas

Visual Studio

• CSS Is Less (Visual Studio)
• Web Essentials 2012 (Visual Studio 2012)
• Web Essentials 2013 (Visual Studio 2013)
• Web Tools 2013 (Visual Studio)

Dreamweaver

• DMXzone Less CSS Compiler

Notepad++ 6.x

• Less.js Syntax Highlighting User Defined Language by Raúl Salitrero
• Less.js Syntax Highlighting User Defined Language by azrafe7
• How to Install

Edit the markdown source for "third-party-compilers"

Node.js Compilers

• grunt-contrib-less
• assemble-less: Full-featured Grunt.js plugin for compiling Less files to CSS, with additional options for maintaining libraries of Less components and themes. For advanced users, this plugin allows you to define and manage Less "packages" or "bundles" using JSON, Lo-dash(underscore) templates (e.g. <%= bootstrap.less %>), and node-glob / minimatch (e.g. '../src/**/*.less"). assemble-less also has a number of options including minifying CSS
• gulp-less: Please note that this plugin discards source-map options, opting to instead using the gulp-sourcemaps library.
• autoless: A Less files watcher, with dependency tracking (changes to imported files cause other files to be updated too) and growl notifications.
• Connect Middleware for Less.js: Connect Middleware for Less.js compiling

Other Technologies

Wro4j Runner CLI Download the wro4j-runner.jar file and run the following command:

java -jar wro4j-runner-1.5.0-jar-with-dependencies.jar --preProcessors lessCss

More details can be found here: Wro4j Runner CLI

CSS::LESSp

http://search.cpan.org/~drinchev/CSS-LESSp/

lessp.pl styles.less > styles.css

Windows Script Host

Note - the official Less node runs on windows, so we are not sure why you would use this.

Less.js for Windows with this usage:

cscript //nologo lessc.wsf input.less [output.css] [-compress]

or

lessc input.less [output.css] [-compress]

dotless

dotless for Windows can be run like this:

dotless.Compiler.exe [-switches] <inputfile> [outputfile]

Also see:

• Ports of Less

Edit the markdown source for "frameworks-using-less"

UI/Theme Frameworks and Components

1pxdeep	Brings designing by relative visual weight, or designing with color schemes, to Bootstrap
Bootflat	Open source Flat UI KIT based on Bootstrap
BootPress	A PHP Framework with a built in Blog and Flat File CMS
Bootstrap	Front-end framework for developing responsive, mobile first projects on the web
Bootstrap a11y theme	Makes web accessibility easier for Bootstrap developers
Bootswatch	Collection of free themes for Bootstrap
Cardinal	Small "mobile first" CSS framework for front-end developers who build responsive web applications
CSSHórus	Library for development of responsive and mobile websites
Flat UI Free	Theme and framework for Bootstrap
frontsize	CSS front end framework
InContent	Image content with description created with CSS
Ink	set of tools for quick development of web interfaces
JBST	Theme framework that can be used as a standalone website builder or to create WordPress themes
KNACSS	Minimalist, responsive and extensible style sheet to kick-start your HTML / CSS projects
Kube	Minimalistic CSS-framework for developers and designers
Metro UI CSS	Set of styles to create a site with an interface similar to Windows 8
Pre	CSS framework
prelude	Lightweight, responsive and extensible front-end framework
Schema	Light, responsive, and lean frontend UI framework
Semantic UI	UI component framework based around useful principles from natural language
UIkit	Lightweight and modular front-end framework for developing web interfaces
ngBoilerplate	An opinionated kickstarter for AngularJS projects
less-rail	Less.js for Rails
Wee	Lightweight front-end framework for logically building complex, responsive web projects

Grid Systems

Flexible Grid System
adaptGrid
Fluidable
Golden Grid System
LESS Zen Grid
Order.less
responsibly
Responsive Boilerplate
Semantic.gs

Mixin Libraries

3L	Mixins library
animate	Library of CSS3 keyframe animations
Clearless	Collection of mixins
Css3LessPlease	Conversion of css3please.com to Less mixins
CssEffects	Collection of CSS style effects
Cssowl	Mixin library
cube.less	Animated 3D cube using only CSS
est	Mixin library
Hexagon	Generate CSS hexagons with custom size and color
homeless	Mixin library
LESS Elements	Set of mixins
LESS Hat	Mixins library
lessley	A jasmine like testing suite written in pure less
Lessmore	Mixins library. Cross-browser support for the CSS3 features and more
LESS-bidi	Set of mixins for creating bi-directional styling
LESS-Mix	Mixins library
media-query-to-type	Media Queries to Media Types with Less
More-Colors.less	Variables for easier color manipulation while you design in the browser
more-less	Mixin lib supporting Less 1.7
More.less	Mixins, animations, shapes and more
more-or-less	for-loops and other functions + css3 mixins
normalize.less	Modularized famous normalize.css using less
Oban	Collection of mixins
Preboot	Collection of variables and mixins. The precursor to Bootstrap
prelude-mixins	Collection of mixins
Shape.LESS	Collection of mixins for various shapes
tRRtoolbelt.less	Mixins and functions for common actions

Edit the markdown source for "developing-less"

Thanks for thinking about contributing. Please read the contributing instructions carefully to avoid wasted work.

Install These Tools

• node - http://nodejs.org/
• phantomjs - http://phantomjs.org/download.html

make sure the paths are setup. If you start your favourite command line and type node -v you should see the node compiler. If you run phantomjs -v you should see the phantomjs version number.

• clone your less.js repository locally
• navigate to your local less.js repository and run npm install this installs less' npm dependencies.
• If you haven't used grunt before, run npm install grunt-cli -g - this allows you to use the "grunt" command anywhere

Usage

If you go to the root of the less repository you should be able to do grunt test - this should run all the tests. For the browser specific only, run grunt browsertest If you want to try out the current version of less against a file, from here do node bin/lessc path/to/file.less

To debug the browser tests, run grunt browsertest-server then go to http://localhost:8088/tmp/browser/ to see the test runner pages.

Optional: To get the current version of the less compiler do npm -g install less - npm is the node package manager and "-g" installs it to be available globally.

You should now be able to do lessc file.less and if there is an appropriate file.less then it will be compiled and output to the stdout. You can then compare it to running locally (node bin/lessc file.less).

Other grunt commands

• grunt benchmark - run our benchmark tests to get some numbers on performance
• grunt stable to create a new release
• grunt readme to generate a new readme.md in the root directory (after each release)

How to Run Less in Other Environments

If you look in the libs folder you will see less, less-node, less-browser. The less folder is pure javascript with no environment specifics. if you require less/libs/less, you get a function that takes an environment object and an array of file managers. The file managers are the same file managers that can also be written as a plugin.

var createLess = require("less/libs/less"),
    myLess = createLess(environment, [myFileManager]);

The environment api is specified in less/libs/less/environment/environment-api.js and the file manager api is specified in less/libs/less/environment/file-manager-api.js.

For file managers we highly recommend setting the prototype as a new AbstractFileManager - this allows you to override what is needed and allows us to implement new functions without breaking existing file managers. For an example of file managers, see the 2 node implementations, the browser implementation or the npm import plugin implementation.

Guide

If you look at http://www.gliffy.com/go/publish/4784259, This is an overview diagram of how less works. Warning! It needs updating with v2 changes.

Books

• Less Web Development Essentials, by Bass Jobsen, Foreword by Alexis Sellier
• Less Web Development Cookbook, by Bass Jobsen and Amin Meyghani, Foreword by Luke Page