使用命令行工具将
.less文件编译成.css文件。
当心!如果你不喜欢使用命令行,请了解更多有关 Less 图形界面工具 的信息。
安装
通过 npm 安装
npm install less -g
-g 参数表示将 lessc 命令安装到全局环境。对于特定版本(或 tag),你可以在软件包(package)名称后面添加 @VERSION ,例如 npm install less@2.7.1 -g。
针对 Node Development 配置段安装 Less
或者,如果你不想将编译器安装到全局环境,则可以
npm i less --save-dev
这将在项目文件夹中安装 lessc 的最新正式版本,并将其添加到 package.json 文件中的 devDependencies 配置段中。
lessc 的 Beta 版
随着新功能的不断开发,lessc 版本将发布到 npm,标记为 beta。这些内部版本 _不会_ 作为 @latest 正式版本发布,并且通常会在该版本中包含 beta 标识(利用 lessc -v 命令获取当前版本号)。
由于 patch(补丁)版本是向后兼容的,因此我们将及时发布 patch 版本,alpha/beta/candidate 版本将作为 minor(次要)或 major(主要)版本进行发布并升级(从 1.4.0 版本开始,我们将努力遵循 语义化版本命名规范)。
服务器端和命令行用法
该仓库中包含的二进制文件 bin/lessc 能够在 *nix、OS X 和 Windows 平台上的 Node.js 上运行。
用法: lessc [option option=parameter ...] <source> [destination]
命令行用法
lessc [option option=parameter ...] <source> [destination]
如果 source 设置为 `-' (破折号或连字符减号),则从 stdin 读取输入。
示例
将 bootstrap.less 编译为 bootstrap.css
lessc bootstrap.less bootstrap.css
特定于 lessc 的参数
有关其他所有参数的信息,请参见 Less 参数列表。
Silent
lessc -s lessc --silent
不显示任何警告信息。
Version
lessc -v
lessc --version
Help
lessc --help |
lessc -h |
展示所有参数的帮助信息并退出。
Makefile
lessc -M
lessc --depends
Outputs a makefile import dependency list to stdout.
No Color
不推荐使用。
lessc --no-color
Clean CSS
在 v2 版本的 less 中,Clean CSS 不再作为直接依赖项而存在。如需将 clean css 与 lessc 一起使用,请使用 clean css 插件。
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">