Command Line Usage

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

Install with npm

npm install less -g

The -g option installs the lessc command available globally. For a specific version (or tag) you can add @VERSION after our package name, e.g. npm install less@2.7.1 -g.

Installing for Node Development

Alternatively, if you don't want to 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.

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).

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

Options specific to lessc

For all other options, see Less Options.

Silent

lessc -s lessc --silent

Stops any warnings from being shown.

Version

lessc -v
lessc --version

Help
lessc --help
lessc -h

Prints a help message with available options and exits.

Makefile

lessc -M
lessc --depends

Outputs a makefile import dependency list to stdout.

No Color

Deprecated.

lessc --no-color

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.


Browser Usage

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

Using Less.js in the browser is the easiest way to get started and convenient 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>

Setting Options

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

<script>
  less = {
    env: "development",
    async: false,
    fileAsync: false,
    poll: 1000,
    functions: {},
    dumpLineNumbers: "comments",
    relativeUrls: false,
    rootpath: ":/a.com/"
  };
</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>

Or for brevity they can be set as attributes on the script and link tags:

<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">