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

使用命令行编译 .less 文件生成 .css文件

注意! 如果命令行不是你的长处, 更多的去了解 GUIs for Less.

Installing lessc for use globally （安装Lessc到全局使用）

用npm工具包安装

npm install less -g

然后你将可以使用 lessc 这个全局命令. 对于指定的版本(或者 标签) 你能在我们的安装包后添加 @VERSION, 例如. npm install less@1.6.2 -g.

Installing for node development （安装到项目开发）

另外如果你不使用全局编译器,你可能会

npm i less --save-dev

该命令会安装最新的lessc官方版本到你的项目文件夹, 同时会把它添加到你项目package.json文件的devDependencies.

请注意,[波浪线版本范围][]将自动在package.json中指定。这是对的,因为最新版本发布的新补丁将由npm安装。

Beta releases of lessc （lessc的测试版本）

因为新功能将会定期的发布,lessc 构建也会将他们作为标记发布到npm。 这些版本不会作为@latest的正式发布,通常是带有版本号或带alpha/beta/release字样的候选版本.

由于补丁发布是持续性的，我们会同时公布补丁版本，作为次要或主要版本升级的alpha/beta/候选版本也会被公布（为了遵循语义版本,我们会从1.4.0版本继续）。

Installing an unpublished development version of lessc （安装lessc 未发布的开发版本）

如果你想安装一个超前的,lessc未发布的版本,按照说明指定一个[git的URL作为一个依赖][]和一定要指定一个实际的提交SHA(不是一个分支的名字)使用commit-ish。这将保证您的项目总是使用lessc的具体版本.

指定的git URL 可能就是官方lessc的repo库或者一个fork库.

Server-Side and Command Line Usage （服务器端命令行使用）

这个资源库包含了二进制资源，bin/lessc 可以在安装有Node.js 的*nix, OSX and Windows这些平台上工作。

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

Command line usage （命令行使用）

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

如果源文件设置`-'命令选项，从标准输入文件读取数据。

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

打印一个带有可选项的帮助菜单,然后退出

Include paths

lessc --include-path=PATH1;PATH2

设置可用的包含路径，在Windows,用':' 或者 ';'分隔

使用这个命令配置一系列less导入所能用到的路径，你可能用到这个比如你想在less文件中指定一个你想要引用的一个less工具库.

在node中使用的话，这样设置一个路径选项

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

Makefile （输出一个带有依赖列表关系的makefile）

lessc -M
lessc --depends

No Color （禁用彩色的输出）

lessc --no-color

No IE Compatability （禁用IE兼容性检查）

lessc --no-ie-compat

目前仅用于 data-uri函数，确保创建出能够适合浏览器处理的图片大小。

Disable JavaScript （禁用JavaScript）

lessc --no-js

Lint （仅语法检查）

lessc --lint
lessc --l

运行less转换器,仅仅会报告错误,无任何输出

Silent （抑制错误消息输出）

lessc -s
lessc --silent

停止所有警告信息显示。

Strict Imports

lessc --strict-imports

Allow imports from insecure https hosts （允许导入不安全的https hosts）

lessc --insecure

Version （显示版本）

lessc -v
lessc --version

Compress （压缩）

lessc -x
lessc --compress

压缩使用less内置的压缩工具,这是一个好的习惯,但没有利用所有专用压缩css的技巧.您能发挥想象改进我们的压缩输出，通过提交pull request.

Clean CSS （清理CSS）

在less v2中，Clean CSS不再被包括进来作为必须依赖。 要使用 lessc 的 Clean CSS （清理CSS），请使用clean css 插件。

Source Map Output Filename （可输出自定义文件名的源代码映射）

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

告诉less 生成一个源代码映射文件(sourcemap).如果不提供文件名映射，则使用源less编译后CSS全文件名来作为扩展映射名称。

Source Map Rootpath （源代码映射带根路径）

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

指定一个根路径添加到源代码映射的每一个less文件路径,并添加到编译生成的css文件源代码映射文件名上

因为basepath默认为存放less文件的目录，rootpath默认的路径从sourcemap输出文件到存放less文件的基本目录。

举例来说如果你生成的css文件在Web服务器根目录上，但你的源Less/Css/map文件在不同的文件夹中。因此，用这个选项可能有下面的结果

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

Source Map Basepath

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

与根路径相反的相反的做法，它指明应当从输出路径被移除的路径。例如，如果你正在编译less-files目录的一个文件，但源文件将在根目录或当前目录下的Web服务器有效，您可以指定此项，移除输出路径中额外的less-files文件路径。

它默认是存放less文件的路径。

Source Map Less Inline

lessc --source-map-less-inline

此选项指定所有的less文件内容都会内嵌在源文件映射中，意味着获取你的.map文件就能获取less源代码.

这可以与内联映射选项（见Source Map Map Inline）一起使用,这样你不需要任何额外的外部文件。

Source Map Map Inline

lessc --source-map-map-inline

此选项指定map文件（包括less文件）应该内嵌在输出的CSS，在生产中不推荐，但对于开发环境，编译输出单个文件，在支持它的浏览器，就可以使用编译的css而显示未编译的less资源

Source Map URL

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

允许你在CSS中重写你的指向map文件的URL，为了防止根路径和原路径选项没有准确生成你需要的情况。

Rootpath （根路径）

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

允许你添加一个用于导入文件和Css文件生成的路径，这不会影响less 被编译的导入语句，仅仅影响停留在输出Css的位置。

例如，如果所有Css引用了resources文件的图片，你能使用此选项添加路径到URL，然后有你配置的文件夹名称。

Relative URLs （相对路径）

lessc -ru
lessc --relative-urls

默认情况下，URL是保持原样，因此当你导入一个引入了图片的子目录文件时，输出Css中路径也会保持相对一致。此选项允许您重写URL，将导入的文件的路径作为图片路径的相对路径，这样就确保URL总是相对于基于导入的文件。例如

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

正常情况将输出如下：

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

但是使用此选项则生成如下：

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

你可能也想考虑使用能嵌入图片到css中的 data-uri函数替换这个选项。

Strict Math （严格的数学运算）

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

默认关闭

如果这个选项关闭， Less将尝试计算你Css中所有的数学运算，例如.

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

目前能被计算。

如果开启严格数学运算, 仅仅只有不必要的圆括号号内的运算会被计算，例如。

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

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

我们原计划默认开启在将来,但它一直是矛盾的选项,我们正在考虑是否用正确的方式解决了这个问题,或者是否Less应该有例外情况‘/’是有效的或Calc 是有用的

Strict Units （严格的单位）

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

默认关闭

没有这个选项, less 会尝试猜数学上单位输出。例如：

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

对于这个例子，事情很明显不对，一个长度乘以另一个长度得到一个面积，但是css不支持这种面积，因此我们断定用户的意思是一个值乘以另外一个值，而不是长度单位，因此输出 2px.

如果这个选项开启，我们会断定是一个计算bug,然后报出一个错误。

Global Variable （全局变量）

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

这个选项定义一个能被文件引用的变量.高效的声明是放置在你基础Less文件的顶部,意味着他能被使用,但也能被覆盖如果在文件中定义了这个变量.

Modify Variable （修改变量）

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

与全局变量选项不同的是,这将在你的基础文件最后放置一个声明,意味着它将覆盖任何Less文件中的定义。

URL Arguments （URL 参数）

lessc --url-args="cache726357"

与全局变量选项不同的是,这将在你的基础文件最后放置一个声明,意味着它将覆盖任何Less文件中的定义。

Line Numbers （行号）

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

生成内嵌source-mapping. 这是浏览器开始支持sourcemaps之前唯一的选择。我们认为这样做是不好的,所以如果你想要保留这个选项请联系我们。

Plugin

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

--plugin 加载一个插件. 如果插件以less-plugin 开始，您也可以省略--plugin=。例如，一旦安装 (npm 安装 less-plugin-clean-css) less-plugin-clean-css 的清理css插件，可以使用--plugin=less-plugin-clean-css 或 --clean-css 加载，也可以后面指定选项，比如--plugin=less-plugin-clean-css="advanced" 或 --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 (例如： 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, 例如：

<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 （监视模式）

为了能够启用监视模式， env必须要设置成development。然后在引入的less.js文件之后调用 less.watch(),例如：

<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 （修改变量）

使用modifyVars可以在运行时修改LESS变量。当用新的变量调用了这个函数时，LESS文件将被重新编译，但是不会被重新加载。一个基本的用法示例：

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

Debugging （调试）

我们在生成的CSS中带上额外的信息，以便一些调试工具可以定位到LESS文件中的行数。

可以通过dumpLineNumbers选项或者在URL中添加!dumpLineNumbers:mediaQuery来开启这个功能。

你可以选择“注释”方式，使用FireLESS来调，或者选择“mediaQuery”方式，使用FireBug/Chrome开发者工具（被识别为SCSS media query调试格式）来调试。

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

类型: Boolean

默认: false

async的参数是用来判断是否异步导入文件。 查看 fileAsync.

dumpLineNumbers

类型: String 参数: ''| 'comments'|'mediaquery'|'all' 默认: ''

当设置dumpLineNumbers直接输出源行信息到编译好的CSSS的文件中时，有利于你调试指定行。

comments 参数用于输出用户可以理解的内容，而mediaquery 使用Firefox一个扩展来解析CSS和抽取信息。

之后我们希望comments能被sourcemaps替代。

env

类型： String 默认： 取决于页面的URL

可以在development或是production环境下运行。

在production环境下，CSS被缓存在本地，消息和信息不能输出到console。

文档的URL开头是file:// ，或是在本地机器中，或是有不标准端口，env的参数将自动设置为development。

例如：

less = { env: 'production' };

errorReporting

类型: String

参数: html|console|function

默认: html

在LESS编译失败时候，errorReporting会设置错误报告的方法。

fileAsync

类型： Boolean

默认： false

使用文件协议访问页面时异步加载导入的文件。

functions

类型： object

在functions这个对象中，key作为函数的名字。

例如：

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

functions可以像内置的LESS函数一样使用。

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

logLevel

类型： Number

默认： 2

javascript控制台日志量（错误等级）。注意：在production环境下，获取不到日志。

2 - Information and errors
1 - Errors
0 - Nothing

poll

类型： Integer

默认： 1000

在监视模式下，每两次请求之间的时间间隔（ms）。

relativeUrls

类型： Boolean

默认： false

是否调整相对路径。如果为false，则url已经是相对于入口的LESS文件。

globalVars

类型： Object

默认： 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.

例如：

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

类型： Object

默认： 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

类型： String

默认： false

添加到每个URL开始处的路径。

useFileCache

类型： Boolean

默认： 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). We do not want to encourage client-side usage in production - this is because it adds a performance degradation for the user, who will see a delay (even if it is sub 1 second) while Less styles are compiled to CSS, and may cause cosmetic issues if Javascript errors occur.

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 reccommend the plugin starts "less-plugin" though that isn't required. For the clean css plugin you would install 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

• Clean CSS plugin to compress less
• Autoprefixer plugin to add backwards compatibility to your css
• Inline urls - converts url() to a call to data-uri()
• Npm Import - import from a sub npm repository
• Bower Resolve - import from a Bower package
• Group CSS Media Queries - group CSS media queries
• Compresses the css output from Less using csswring
• Generate left-to-right (LTR) or right-to-left (RTL) CSS from Less using css-flip
• Postprocess Less using pleeease
• Adds some advanced colour functions that helps in finding more contrasting colors
• The cubehelix(y,a,b,t) function returns a color between the two colors a and b, using a gamma correction value of 1. (Based on Dave Green's `cubehelix' colour scheme)

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 signtaure, 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.

less.render(lessInput)
    .then(function(output) {
        // output.css = string of css
        // output.map = undefined
}
//,
less.render(lessInput)
    .then(function(output,{sourceMap:{}}) {
        // output.css = string of css
        // output.map = string of sourcemap
}
//or,
less.render(lessInput)
    .then(function(output,{sourceMap: { sourceMapFileInline: true}}) {
        // 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

托管在浏览器中的在线集成开发环境(IDE)允许用户实时编辑和编译Less为CSS

winless.org/online-less-compiler

这款Less编译器有助于你学习Less。你可以学习里面的例子或者尝试自己写Less代码。

lesstester.com

Less CSS在线编译器

dopefly.com/less-converter

用 Less JS 实现的一款简易的 Less CSS 文件转换器

lessphp.gpeasy.com/demo

less.php 实现示例.

leafo.net/lessphp/editor

lessphp 实现示例.

precess

一个真正的实时预处理编译器。

Online Web IDEs/Playgrounds with Less support （支持Less的在线IDE和在线开发工具）

CSSDeck Labs

CSSDeck Labs是一个你可以快速创建包含HTML，CSS，JS代码的实例（或是测试示例）的在线开发工具。

CodePen

CodePen是一个针对网站前端代码设计的开发工具。

Fiddle Salad

Fiddle Salad是一个立即执行代码环境的在线开发工具。

JS Bin

JSBin是一个Web应用，主要用于帮助测试JavaScript和CSS的代码片段。

jsFiddle

在线编辑器

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!

Crunch is not just a Less compiler, it is also a Less editor for Windows and Mac.

If you work a lot with Less files, you should definitely try it out. Crunch is built on the Adobe AIR platform. Get more info: http://crunchapp.net/.

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/

Specific platforms

Windows

Prepros App

Prepros is a free and open source app that can compile less, sass, stylus, jade, haml and much more with live browser refresh.

Get more info at http://alphapixels.com/prepros

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: https://github.com/marklagendijk/WinLess

OSx

LESS.app

LESS.app was the first GUI compiler for Less. LESS.app has a 'Compiler' tab where you can see the compiler results.

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

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 choosen, settings for compile the file. Get more info: https://github.com/Mte90/Plessc

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

或参阅: GUIs for Less.js

Editors and IDEs （编辑器和IDE）

• Crunch! (内置支持)
• Mindscape Web Workbench (内置支持)
• NetBeans (内置 syntax highlighting)
• TextMate
• Vim
• Emacs
• jetBrains WebStorm 和 PhpStorm (内置支持)
• Brackets (内置语法高亮, several extensions 编译)
• CodeLobster (内置 syntax highlighting)
• KineticWing IDE (内置 support)
• nodeMirror (内置支持, 内置 HTML/CSS/Less 预览)

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

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 语法高亮 由 Raúl Salitrero 自定义的
• Less.js 语法高亮 由 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.
• RECESS: Twitter's code quality tool for CSS built on top of Less. RECESS has options for compiling Less to CSS, as well as linting, formatting and minifying CSS.
• 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
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
UIkit	Lightweight and modular front-end framework for developing web interfaces

Grid Systems （栅格系统）

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

Mixin Libraries （Mixin库）

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
LESS Elements	Set of mixins
LESS Hat	Mixins library
lessley	A jasmine like testing suite written in pure less
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
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"

感谢您考虑为此贡献。请先认真阅读贡献说明，以免造成浪费。

Install these tools （安装这些工具）

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

确保环境变量（paths）已经配置好。 当你打开你最喜欢的命令行，执行 node -v 命令，你会看到node编译器版本号，执行 phantomjs -v 命令，你会看到phantomjs的版本号。

• 克隆你的 less.js 库到本地
• 前往你本地的 less.js 库然后执行 npm install 命令，这将会安装 less 的相关资源文件。
• 如果你之前没有用过grunt, 执行 npm install grunt-cli -g 命令，然后你就可以在各个地方（全局）执行“grunt”命令了。

Usage （使用）

当你去到less库的根目录，你可以执行 grunt test 命令，这个操作将会执行所有的测试。 为特定的浏览器，执行 grunt browsertest 命令，如果你不想使用一个文件，而是想使用当前版本的less，请执行 node bin/lessc path/to/file.less 命令。

在浏览器调试，执行 grunt browsertest-server 命令，然后前往 http://localhost:8088/tmp/browser/ 去看测试运行的页面。

可选: 想要获得最新的 less 编译器，请执行 npm -g install less 命令， npm 是node的包管理， "-g" 表示安装之后全局有效。

现在你可以执行 lessc file.less 命令了，如果有一个相应的 file.less 文件，它将会被编译以及标准输出编译后的内容。 你可以拿它跟通过本地执行 (node bin/lessc file.less)后得到的文件进行对比下。

其他grunt命令

• grunt benchmark - 执行基准测试去获得一些性能指数
• grunt stable - 新建一个版本
• grunt readme - 在路径根目录新建一个 readme.md 文件（每产生一个新版本之后）

How to run less in other environments （如何在其他环境中运行less）

打开libs文件夹，你可以看到less, less-node, less-browser。less目录中是纯粹的javascript，没有具体的环境因素。如果你 require less/libs/less, 你会得到一个函数，这需要一个环境对象和一个文件管理器的数组。文件管理器是相同的文件管理器也可以写为一个插件。

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

环境API在less/libs/less/environment/environment-api.js中指定，文件管理器API在less/libs/less/environment/file-manager-api.js中指定。

对于文件管理器，我们强烈建议您设置原型作为一个新的AbstractFileManager - 这允许您覆盖，允许我们能够实现新的功能，而不会破坏现有的文件管理器。文件管理器的一个例子，看2节的实现，浏览器实现或npm导入插件实现。

Guide （指南）

你可以看看 http://www.gliffy.com/go/publish/4784259， 这是一个less工作原理概览图。

Books

• Less Web Development Essentials, by Bass Jobsen, Foreword by Alexis Sellier