使用命令行将
.less文件编译成.css\Compile
.lessfiles to.cssusing the command line
注意! 如果你不喜欢命令行,请了解有关 Less 的图形用户界面 的更多信息。
\Heads up! If the command line isn't your thing, learn more about GUIs for Less.
安装
\Installing
使用 npm 安装
\Install with npm
npm install less -g
-g 选项安装全局可用的 lessc 命令。对于特定版本(或标签),你可以在我们的包名称后添加 @VERSION,例如 npm install less@2.7.1 -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.
安装 Node 开发
\Installing for Node Development
或者,如果你不想全局使用编译器,你可能会
\Alternatively, if you don't want to use the compiler globally, you may be after
npm i less --save-dev
这将在你的项目文件夹中安装最新的正式版 lessc,同时将它添加到你项目的 package.json 中的 devDependencies。
\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.
lessc 的测试版
\Beta releases of lessc
随着新功能的开发,lessc 版本将定期发布到 npm,标记为 beta。这些构建不会作为 @latest 官方版本发布,并且通常在版本中有测试版(使用 lessc -v 获取当前版本)。
\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).
由于补丁版本是非破坏性的,我们将立即发布补丁版本,alpha/beta/候选版本将作为次要或主要版本升级发布(我们从 1.4.0 开始努力遵循 语义版本控制)。
\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
此存储库中包含的二进制文件 bin/lessc 在 *nix、OS X 和 Windows 上与 Node.js 一起使用。
\The binary included in this repository, bin/lessc works with Node.js on *nix, OS X and Windows.
用法:lessc [option option=parameter ...] <source> [destination]
\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
将 bootstrap.less 编译为 bootstrap.css
\Compile bootstrap.less to bootstrap.css
lessc bootstrap.less bootstrap.css
特定于 lessc 的选项
\Options specific to lessc
对于所有其他选项,请参见 Less 选项。
\For all other options, see Less Options.
Silent
lessc -s lessc --沉默
\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
将 makefile 导入依赖列表输出到 stdout。
\Outputs a makefile import dependency list to stdout.
无颜色
\No Color
已弃用。
\Deprecated.
lessc --no-color
清理 CSS
\Clean CSS
在 v2 of less 中,Clean CSS 不再作为直接依赖包含在内。要在 lessc 中使用干净的 css,请使用 清理 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.
在浏览器中使用 Less.js 是最简单的入门方式,也便于使用 Less 进行开发,但在生产中,当性能和可靠性很重要时,我们建议使用 Node.js 或许多可用的第三方工具之一进行预编译 .
\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.
首先,链接 .less 样式表,并将 rel 属性设置为"stylesheet/less":
\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" />
接下来,下载 less.js 并将其包含在页面 <head> 元素的 <script></script> 标记中:
\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
你可以通过编程方式设置选项,方法是将它们设置在脚本标记之前的 less 对象上 - 这会影响所有初始链接标签和 less 的编程使用。
\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">