Less is a CSS preprocessor language that extends the CSS language, adding features such as variables, mixins, and functions, making CSS easier to maintain, convenient for theming, and extensible.

Less can run on Node, in the browser, and on the Rhino platform. There are many third-party tools online to help you compile Less source code.

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%) }
}

Compilation result

.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 run on the command line via npm; downloaded as a script file in the browser; or integrated into a wide range of third-party tools. Please refer toUsage 。

Installation

The easiest way to install on the server side is via npm (node.jsthe package manager), the method is as follows:

$ npm install -g less

Command Line Usage:

After installing Less, you can invoke the Less compiler from the command line, as follows:

$ lessc styles.less

This will output the compiled CSS code tostdout, you can redirect the output to a file:

$ lessc styles.less > styles.css

To output compressed CSS, just add-xoption. If you want better compression, you can also use--clean-cssEnable optionClean CSSperform compression.

Running lessc without any arguments will output a list of all available options on the command line.

Using in Code

You can invoke the Less compiler in code (Node platform) as follows.

var less = require('less');

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

The output result is:

.class {
  width: 2;
}

You can also manually invoke the parser and the 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

Multiple parameters can be passed to the compiler:

var parser = new(less.Parser)({
  paths: ['.', './lib'], // Specify search paths for @import directives
  filename: 'style.less' // Specify a filename, for better error messages
});

parser.parse('.class { width: (1 + 1) }', function (e, tree) {
  tree.toCSS({
    // Minify CSS output
    compress: true
  });
});

Third-party Tools

ViewUsageLearn about the details of some third-party tools.

Rhino Command Line

Each less.js release also includes a rhino-compatible version.

The command-line Rhino version requires the following two files:

less-rhino-.js - compile and execute
lessc-rhino-.js - command-line support

Compile from the command line:

java -jar js.jar -f less-rhino-<version>.js lessc-rhino-<version>.js styles.less styles.css

The above will compile the styles.less file and save it as the styles.css file. The output file parameter is optional; if this parameter is not specified, less will output to the standard output by default (stdout）。

Client-side Usage

Running less.js in the browser is very convenient for development, but it is not recommended for production.

Using Less.js on the client side is the easiest way, and it is very convenient during development. However, in a production environment, performance and reliability are very important,We recommend that you use node.js or other third-party tools to precompile。

Let's get started. On the page, add.lessthe stylesheet link, and thenrelThe attribute is set to "stylesheet/less"：

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

Next, downloadless.jsAnd through<script></script>use the tag to include it, placing it in the page's<head>inside element:

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

Tips

Make sure to load your stylesheets before less.js.
If loading multiple.lessStylesheet files are compiled individually. Therefore, any variables, mixins, or namespaces defined in one file cannot be accessed in other files.

Browser Options

In<script src="less.js"></script>before defining the globallessThe object can then beLess.jsSet parameters:

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

Learn moreBrowser options

Browser Download

Download Less.js v1.7.3

bower install less

Less CDN

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

Granting you the power:

You may download and use all or part of the Less.js code for personal, internal company, or commercial purposes
Include Less.js in your product

Strictly prohibited:

Use any Less.js code snippet without declaring copyright ownership

Your obligations:

If your product includes Less.js, you must include a copy of the Less.js copyright license
In your product that includes Less.js, explicitly state that the copyright of Less.js belongs to the Less core team

Not required:

Include Less.js itself or your modified source code in your product
Submit your modifications to Less.js to the Less.js project (we still encourage submitting improvements to Less.js)

The complete Less.js copyright information is located atInside the project repository, please refer to.

Quick Start