命令行用法

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

注意！如果您不喜欢命令行，请了解有关 Less 的图形用户界面的更多信息。

安装

使用 npm 安装

npm install less -g

-g 选项安装全局可用的 lessc 命令。对于特定版本（或标签），您可以在我们的包名称后添加 @VERSION，例如 npm install less@2.7.1 -g。

安装 Node 开发

或者，如果您不想全局使用编译器，您可能会

npm i less --save-dev

这将在你的项目文件夹中安装最新的正式版 lessc，同时将它添加到你项目的 package.json 中的 devDependencies。

lessc 的测试版

随着新功能的开发，lessc 版本将定期发布到 npm，标记为 beta。这些构建不会作为 @latest 官方版本发布，并且通常在版本中有测试版（使用 lessc -v 获取当前版本）。

由于补丁版本是非破坏性的，我们将立即发布补丁版本，alpha/beta/候选版本将作为次要或主要版本升级发布（我们从 1.4.0 开始努力遵循语义版本控制）。

服务器端和命令行使用

此存储库中包含的二进制文件 bin/lessc 在 *nix、OS X 和 Windows 上与 Node.js 一起使用。

用法： lessc [option option=parameter ...] <source> [destination]

命令行用法

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

如果源设置为 `-' (dash or hyphen-minus), input is read from stdin.

示例

Compile bootstrap.less to bootstrap.css

lessc bootstrap.less bootstrap.css

特定于 `lessc` 的选项

For all other options, see Less 选项.

Silent

lessc -s lessc --silent

Stops any warnings from being shown.

版本

lessc -v
lessc --version

帮助


`lessc --help`
`lessc -h`

打印带有可用选项的帮助消息并退出。

Makefile

lessc -M
lessc --depends

将 makefile 导入依赖项列表输出到 stdout。

无颜色

弃用。

lessc --no-color

清理 CSS

在 v2 of less 中，Clean CSS 不再作为直接依赖包含在内。要在 lessc 中使用干净的 css，请使用清理 CSS 插件。

浏览器用法

在浏览器中使用 Less.js 是最简单的入门方式，也便于使用 Less 进行开发，但在生产中，当性能和可靠性很重要时，我们建议使用 Node.js 或许多可用的第三方工具之一进行预编译 .

首先，链接 .less 样式表并将 rel 属性设置为 "stylesheet/less"：

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

接下来，下载 less.js 并将其包含在页面 <head> 元素的 <script></script> 标记中：

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

设置选项

您可以通过编程方式设置选项，方法是将它们设置在脚本标记之前的 less 对象上 - 这会影响所有初始链接标记和 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>

另一种方法是在脚本标签上指定选项，例如

<script>
  less = {
    env: "development"
  };
</script>
<script src="less.js" data-env="development"></script>

或者为简洁起见，可以将它们设置为脚本和链接标签上的属性：

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

浏览器支持

Less.js 支持所有现代浏览器（最新版本的 Chrome、Firefox、Safari 和 Edge）。虽然在生产环境中可以在客户端使用 Less，但请注意这样做会对性能产生影响（尽管 Less 的最新版本要快得多）。此外，如果出现 JavaScript 错误，有时会出现外观问题。这是灵活性与速度的权衡。为了静态网站的最快性能，我们建议在服务器端编译 Less。

在生产中减少使用客户端是有原因的，例如，如果你想让用户调整会影响主题的变量，并且你想实时向他们展示它——在这种情况下，用户并不担心在看到它之前等待样式更新。

提示

确保在脚本之前包含样式表。
当您链接多个 .less 样式表时，每个样式表都是独立编译的。因此，您在样式表中定义的任何变量、混入或命名空间都无法在任何其他样式表中访问。
由于浏览器同源策略，加载外部资源需要启用 CORS

监视模式

要启用手表模式，选项 env 必须设置为 development。然后在包含 less.js 文件之后，调用 less.watch()，如下所示：

<script>less = { env: 'development'};</script>
<script src="less.js"></script>
<script>less.watch();</script>

或者，您可以通过将 #!watch 附加到 URL 来临时启用监视模式。

修改变量

启用 Less 变量的运行时修改。当使用新值调用时，Less 文件会在不重新加载的情况下重新编译。简单的基本用法：

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

调试

可以在 CSS 中输出规则，允许工具定位规则的来源。

如上所述指定选项 dumpLineNumbers 或将 !dumpLineNumbers:mediaquery 添加到 url。

您可以将 mediaquery 选项与 FireLESS 一起使用（它与 SCSS 媒体查询调试格式相同）。另见 FireLess 和 Less v2。 comment 选项可用于在内联编译的 CSS 代码中显示文件信息和行号。

选项

在加载 less.js 脚本之前**在全局 less 对象中设置选项：

<!-- 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: '"quoted value"',
      var2: 'regular value'
    },
    rootpath: ":/a.com/"
  };
</script>
<script src="less.js"></script>

浏览器中特定于 Less.js 的选项

对于所有其他选项，请参见 Less 选项。

async

类型： Boolean

默认： false

是否使用异步选项请求导入文件。查阅 fileAsync。

env

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

要运行的环境可以是 development 或 production。

在生产中，您的 css 缓存在本地存储中，信息消息不会输出到控制台。

如果文档的 URL 以 file:// 开头或位于您的本地计算机上或具有非标准端口，它将自动设置为 development。

例如

less = { env: 'production' };

errorReporting

类型： String

选项： html|console|function

默认： html

设置编译失败时报错的方式。

fileAsync

类型： Boolean

默认： false

在具有文件协议的页面中是否异步请求导入。

函数（不推荐使用 - 使用@plugin）

类型： object

用户功能，按名称键控。

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

它可以像本地 Less 函数一样使用，例如

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

logLevel

类型： Number

默认： 2 javascript 控制台中的日志记录量。注意：如果您在 production 环境中，您将不会获得任何日志记录。

2 - Information and errors
1 - Errors
0 - Nothing

poll

类型： Integer

默认： 1000

在监视模式下轮询之间的时间量（以毫秒为单位）。

relativeUrls

类型： Boolean

默认： false

（可选）将 URL 调整为相对的。如果为 false，则 URL 已经相对于条目较少的文件。

useFileCache

类型： Boolean

默认： true （以前是 v2 之前的 false）

是否使用每个会话文件缓存。这会缓存 less 文件，以便您可以调用 modifyVars 并且它不会再次检索所有 less 文件。如果您使用 watcher 或调用 refresh 并将 reload 设置为 true，则缓存将在运行前被清除。

Less.js 选项

跨平台选项

包含路径


`lessc --include-path=PATH1;PATH2`	`{ paths: ['PATH1', 'PATH2'] }`

如果 @import 规则中的文件在该确切位置不存在，Less 将在传递给此选项的位置查找它。例如，您可以使用它来指定一个库的路径，您希望在 Less 文件中简单且相对地引用该库。

根路径


`lessc -rp=resources/` `lessc --rootpath=resources/`	`{ rootpath: 'resources/' }`

允许您在 css 中为每个生成的导入和 url 添加路径。这不会影响处理的 Less import 语句，只会影响输出 css 中保留的语句。

例如，如果 css 使用的所有图像都在一个名为 resources 的文件夹中，您可以使用此选项将其添加到 URL，然后可以配置该文件夹的名称。

重写 URL


`lessc -ru=off` `lessc --rewrite-urls=off`	`{ rewriteUrls: 'off' }`
`lessc -ru=all` `lessc --rewrite-urls=all`	`{ rewriteUrls: 'all' }`
`lessc -ru=local` `lessc --rewrite-urls=local`	`{ rewriteUrls: 'local' }`

默认情况下，URL 保持原样 (off)，因此如果您在引用图像的子目录中导入文件，则将在 css 中输出完全相同的 URL。此选项允许您重写导入文件中的 URL，以便 URL 始终相对于已传递给 Less 的基本文件。例如。

/* main.less */
@import "global/fonts.less";

/* global/fonts.less */
@font-face {
  font-family: 'MyFont';
  src: url('myfont/myfont.woff2') format('woff2');
}

没有任何设置或使用 rewriteUrls: 'off'，编译 main.less 将输出：

/* main.less */
/* global/fonts.less */
@font-face {
  font-family: 'MyFont';
  src: url('myfont/myfont.woff2') format('woff2');
}

使用 rewriteUrls: 'all'，它将输出：

/* main.less */
/* global/fonts.less */
@font-face {
  font-family: 'MyFont';
  src: url('./global/myfont/myfont.woff2') format('woff2');
}

对于 rewriteUrls: 'local'，它只会重写明确相关的 URL（以 . 开头的 URL）：

url('./myfont/myfont.woff2') /* becomes */ url('./global/myfont/myfont.woff2')
url('myfont/myfont.woff2') /* stays */ url('myfont/myfont.woff2')

如果您将 Less 与 CSS 模块结合使用类似 Node.js 的解析语义，这将很有用。

您可能还想考虑使用 data-uri 函数而不是这个选项，它将图像嵌入到 css 中。

数学

发布 v3.7.0


`lessc -m=[option]` `lessc --math=[option]`	`{ math: '[option]' }`

Less 重新构建了数学选项，以提供介于之前的 strictMath 设置（一直需要括号）和默认设置（在所有情况下都执行数学运算）之间的中间特性。

为了减少与现在自由地在值之间使用 / 符号的 CSS 的冲突，现在有一种数学模式只需要括号进行除法。（现在这是 Less 4 中的默认设置。）"严格的数学" 也进行了调整以更直观地操作，尽管支持遗留行为。

math 可用的四个选项是：

always（3.x 默认值）- 热切地减少数学
parens-division （默认 4.0） - 使用 / 运算符不在括号外执行除法（但可以在括号外使用 ./ 运算符进行 "forced" - ./ 已弃用）
parens | strict - 所有数学表达式都需要括号。
strict-legacy（在 4.0 中删除）- 在某些情况下，如果无法计算表达式的任何部分，则不会计算数学。

总是示例：

.math {
  a: 1 + 1;
  b: 2px / 2;
  c: 2px ./ 2;
  d: (2px / 2);
}

输出：

.math {
  a: 2;
  b: 1px;
  c: 1px;
  d: 1px;
}

parens-division

例子：

.math {
  a: 1 + 1;
  b: 2px / 2;
  c: 2px ./ 2;
  d: (2px / 2);
}

输出：

.math {
  a: 2;
  b: 2px / 2;
  c: 1px;
  d: 1px;
}

严格的

.math {
  a: 1 + 1;
  b: 2px / 2;
  c: (2px / 2) + (3px / 1);
}

输出：

.math {
  a: 1 + 1;
  b: 2px / 2;
  c: 1px + 3px;
}

严格遗产

在旧版 strictMath 模式中，括号外的混合表达式意味着不会对整个括号求值。（可能不是你想要的。）

.math {
  a: 1 + 1;
  b: 2px / 2;
  c: (2px / 2) + (3px / 1);
}

输出：

.math {
  a: 1 + 1;
  b: 2px / 2;
  c: (2px / 2) + (3px / 1);
}

严格数学（已弃用）

这已被 math 选项取代。

相对 URL（已弃用）


`lessc -ru` `lessc --relative-urls`	`{ relativeUrls: true }`

已被rewriteUrls: "all"取代

严格单位


`lessc -su=on` `lessc --strict-units=on`	`{ strictUnits: true }`

默认为关闭/假。

如果没有这个选项，Less 在进行数学运算时会尝试猜测输出单元。例如

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

在这种情况下，事情显然是不对的——长度乘以长度得到一个区域，但 css 不支持指定区域。所以我们假设用户希望其中一个值是一个值，而不是长度单位，我们输出 2px。

启用严格单位后，我们假设这是计算中的错误并抛出错误。

IE8 兼容性（已弃用）


`lessc --ie-compat`	`{ ieCompat: true }`

从 v3.0.0 开始默认为 False。目前仅用于 data-uri 功能，以确保不会创建太大而浏览器无法处理的图像。

启用内联 JavaScript（已弃用）


`lessc --js`	`{ javascriptEnabled: true }`

从 v3.0.0 开始默认为 False。启用 .less 文件中内联 JavaScript 的评估。这给一些开发人员带来了安全问题，他们不希望样式表的用户输入具有可执行代码。

替换为 @plugin 选项。

全局变量


`lessc --global-var="color1=red"`	`{ globalVars: { color1: 'red' } }`

该选项定义了一个可以被文件引用的变量。实际上，声明放在基本 Less 文件的顶部，这意味着它可以使用，但如果在文件中定义了这个变量，它也可以被覆盖。

修改变量


`lessc --modify-var="color1=red"`	`{ modifyVars: { color1: 'red' } }`

与全局变量选项相反，这会将声明放在基础文件的末尾，这意味着它将覆盖 Less 文件中定义的任何内容。

网址参数


`lessc --url-args="cache726357"`	`{ urlArgs: 'cache726357' }`

此选项允许您指定一个参数以继续访问每个 URL。例如，这可以用于缓存清除。

行号（已弃用）


`lessc --line-numbers=comments` `lessc --line-numbers=mediaquery` `lessc --line-numbers=all`	`{ dumpLineNumbers: 'comments' }`

生成内联源映射。在浏览器开始支持 sourcemaps 之前，这是唯一的选择。

预加载插件

查阅：预加载插件

Lint


`lessc --lint -l`	`{ lint: true }`

运行 less 解析器并只报告错误而没有任何输出。

压缩（已弃用）


`lessc --compress -x`	`{ compress: true }`

使用较少的内置压缩进行压缩。这做得不错，但没有利用专用 css 压缩的所有技巧。一般来说，我们建议在你的 Less 转换为 CSS 后，使用第三方工具清理和压缩 CSS。

允许从不安全的 HTTPS 主机导入


`lessc --insecure`	`{ insecure: true }`

源映射选项

这些选项中的大多数不适用于在浏览器中使用 Less.js，因为您应该使用预编译的 Less 文件生成源映射。

生成源映射


`lessc --source-map`	`{ sourceMap: {} }`

告诉 less 生成一个 sourcemap。

源映射输出文件名


`lessc --source-map=file.map`	`{ sourceMap: { outputFilename: 'file.map' } }`

源映射根路径


`lessc --source-map-rootpath=dev-files/`	`{ sourceMap: { sourceMapRootpath: 'dev-files/' } }`

指定一个根路径，该路径应添加到 sourcemap 中的每个 less 文件路径以及输出 css 中指定的映射文件的路径。

因为basepath默认是input less文件的目录，rootpath默认是sourcemap输出文件到input less文件的基目录的路径。

例如，如果您在 Web 服务器的根目录中生成了一个 css 文件，但您的源 less/css/map 文件位于不同的文件夹中，请使用此选项。所以对于上面的选项你可能有

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

源映射基本路径


`lessc --source-map-basepath=less-files/`	`{ sourceMap: { sourceMapBasepath: 'less-files/' } }`

这与 rootpath 选项相反，它指定应从输出路径中删除的路径。例如，如果您正在 less-files 目录中编译一个文件，但源文件将在您的 Web 服务器的根目录或当前目录中可用，您可以指定它以删除路径的附加 less-files 部分。

它默认为输入较少文件的路径。

在源映射中包含 Less 源


`lessc --source-map-include-source`	`{ sourceMap: { outputSourceFiles: true } }`

此选项指定我们应该将所有 Less 文件包含到 sourcemap 中。这意味着您只需要您的地图文件即可到达您的原始来源。

这可以与 map inline 选项结合使用，因此您根本不需要任何额外的外部文件。

源映射映射内联


`lessc --source-map-inline`	`{ sourceMap: { sourceMapFileInline: true } }`

此选项指定映射文件应内嵌在输出 CSS 中。这不推荐用于生产，但对于开发，它允许编译器生成单个输出文件，在支持它的浏览器中，使用已编译的 css，但向您显示未编译的 less 源。

源映射 URL


`lessc --source-map-url=../my-map.json`	`{ sourceMap: { sourceMapURL: '../my-map.json' } }`

允许您覆盖指向地图文件的 css 中的 URL。这是针对 rootpath 和 basepath 选项没有产生您需要的内容的情况。

预加载插件

在 Less.js 中开始解析之前加载插件

虽然使用插件的最简单方法是使用 @plugin 规则，但在 Node.js 环境中，您可以通过命令行或在 Less 选项中指定它来预加载全局 Less.js 插件。

预处理

如果你想添加一个 Less.js 预处理器，预加载插件是必要的。也就是说，一个在解析甚至开始之前被调用并传递原始 Less 源的插件。 Sass-To-Less 预处理器插件就是一个例子。

注意：预评估插件不需要预加载（在解析 Less 源之后，但在评估之前）。

Node.js

使用命令行

如果你正在使用 lessc，你需要做的第一件事就是安装那个插件。在像 NPM 这样的注册表中，我们建议使用 "less-plugin-" 前缀注册 Less.js 插件（以便于搜索），但这不是必需的。因此，对于自定义插件，您可以安装：

npm install less-plugin-myplugin

要使用该插件，您只需编写以下命令即可在命令行上传递它：

lessc --myplugin

只要存在未知的 Less 选项（如 "myplugin"），Less.js 将尝试加载 "less-plugin-myplugin" 和 "myplugin" 模块作为插件。

您还可以通过以下方式显式指定插件：

lessc --plugin=myplugin

要将选项传递给插件，您可以使用以下两种方式之一进行编写。

lessc --myplugin="advanced"
lessc --plugin=myplugin=advanced

通过 Less.js 加载插件

在 Node 中，需要插件并将其作为选项插件传递给数组中的 less。例如。

var LessPlugin = require('less-plugin-myplugin');
less.render(myCSS, { plugins: [LessPlugin] })
  .then(
    function(output) { },
    function(error) { }
  );

程序化用法

less 的主要入口点是 less.render 函数。这采用以下格式

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

options 参数是可选的。如果您指定回调，则不会返回承诺，如果您没有指定回调，则会给出承诺。在幕后，使用了回调版本，以便可以同步使用 less。

如果你想渲染一个文件，你首先要将它读入一个字符串（传递给 less.render），然后将选项上的文件名字段设置为主文件的文件名。 less 将处理所有进口加工。

sourceMap 选项是一个对象，它使您能够设置子 sourcemap 选项。可用的子选项是： sourceMapURL、sourceMapBasepath、sourceMapRootpath、outputSourceFiles 和 sourceMapFileInline。请注意，sourceMap 选项现在不适用于浏览器编译器中的 less.js。

less.render(lessInput)
    .then(function(output) {
        // output.css = string of css
        // output.map = undefined
}
//,
less.render(lessInput, {sourceMap: {}})
    .then(function(output) {
        // output.css = string of css
        // output.map = string of sourcemap
}
//or,
less.render(lessInput, {sourceMap: {sourceMapFileInline: true}})
    .then(function(output) {
        // output.css = string of css \n /*# sourceMappingURL=data:application/json;base64,eyJ2ZXJ..= */
        // output.map = undefined
}

访问日志

您可以使用以下代码添加日志监听器

less.logger.addListener({
    debug: function(msg) {
    },
    info: function(msg) {
    },
    warn: function(msg) {
    },
    error: function(msg) {
    }
});

注意：所有功能都是可选的。错误不会被记录，而是被传递回 less.render 中的回调或承诺

API

即将推出

为 Less.js 做贡献

感谢您考虑贡献！请仔细阅读贡献说明以避免浪费工作。

安装这些工具

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

确保路径已设置。如果您启动您最喜欢的命令行并键入 node -v，您应该会看到节点编译器。如果你运行 phantomjs -v，你应该看到 phantomjs 版本号。

在本地克隆你的 less.js 仓库
导航到本地 less.js 存储库并运行 npm install 这将安装 less 的 npm 依赖项。

用法

Grunt 用于运行开发命令，例如测试、构建和基准测试。如果全局安装了 grunt-cli，则可以使用 grunt [command_name] 运行它们，也可以使用 npm run grunt -- [command_name] 运行它们。

如果你转到 Less 存储库的根目录，你应该能够执行 npm test（npm run grunt -- test 的一个方便的别名）——这应该运行所有测试。仅针对特定浏览器，运行 npm run grunt -- browsertest 如果你想针对文件试用当前版本的 less，从这里执行 node bin/lessc path/to/file.less

要调试浏览器测试，运行 npm run grunt -- browsertest-server 然后转到 http://localhost:8088/tmp/browser/ 以查看测试运行程序页面。

可选的：要获取 Less 编译器的当前版本，请执行 npm -g install less - npm 是节点包管理器，"-g" 将其安装为全局可用。

您现在应该可以执行 lessc file.less，如果有合适的 file.less，那么它将被编译并输出到标准输出。然后，您可以将其与本地运行 (node bin/lessc file.less) 进行比较。

其他 grunt 命令

npm run grunt -- benchmark - 运行我们的基准测试以获得一些性能数据
npm run grunt -- stable 创建新版本
npm run grunt -- readme 在根目录下生成一个新的readme.md（每次发布后）

如何在其他环境中运行 Less

如果查看 libs 文件夹，您将看到 less、less-node、less-browser。 less 文件夹是纯 javascript，没有环境细节。如果你需要 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 导入插件实现。

指南

如果你看 http://www.gliffy.com/go/publish/4784259，这是 less 工作原理的概览图。警告！它需要更新 v2 更改。

命令行用法

安装

安装 Node 开发

lessc 的测试版

服务器端和命令行使用

命令行用法

示例

特定于 lessc 的选项

Silent

版本

帮助

Makefile

无颜色

清理 CSS

浏览器用法

设置选项

浏览器支持

提示

监视模式

修改变量

调试

选项

浏览器中特定于 Less.js 的选项

async

env

errorReporting

fileAsync

函数（不推荐使用 - 使用@plugin）

logLevel

poll

relativeUrls

useFileCache

Less.js 选项

跨平台选项

包含路径

根路径

重写 URL

数学

严格数学（已弃用）

相对 URL（已弃用）

严格单位

IE8 兼容性（已弃用）

启用内联 JavaScript（已弃用）

全局变量

修改变量

网址参数

行号（已弃用）

预加载插件

Lint

压缩（已弃用）

允许从不安全的 HTTPS 主机导入

源映射选项

生成源映射

源映射输出文件名

源映射根路径

源映射基本路径

在源映射中包含 Less 源

源映射映射内联

源映射 URL

预加载插件

预处理

Node.js

使用命令行

通过 Less.js 加载插件

程序化用法

访问日志

API

为 Less.js 做贡献

安装这些工具

用法

如何在其他环境中运行 Less

指南

特定于 `lessc` 的选项