命令行用法

编辑“command-line-usage”的 Markdown 源

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

注意！如果命令行不是你的菜，可以详细了解 Less 的 GUI。

安装

使用 npm 安装

npm install less -g

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

为 Node 开发安装

或者，如果你不想全局使用编译器，你可能需要

npm i less --save-dev

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

lessc 的 Beta 版本

定期地，随着新功能的开发，lessc 构建将发布到 npm，标记为 beta。这些构建不会发布为 @latest 官方版本，并且通常在版本中包含 beta（使用 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]

如果源设置为 `-'（破折号或连字符减号），则从 stdin 读取输入。

示例

将 bootstrap.less 编译为 bootstrap.css

lessc bootstrap.less bootstrap.css

特定于 lessc 的选项

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

静默

lessc -s lessc --silent

停止显示任何警告。

版本

lessc -v
lessc --version

帮助
lessc --help
lessc -h

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

Makefile

lessc -M
lessc --depends

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

无颜色

已弃用.

lessc --no-color

Clean CSS

在 less 的 v2 中，Clean CSS 不再作为直接依赖项包含在内。要将 clean css 与 lessc 一起使用，请使用 clean css 插件。


浏览器使用

编辑 "using-less-in-the-browser" 的 markdown 源代码

在浏览器中使用 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 有很多原因，例如，如果你想允许用户调整会影响主题的变量，并且你想实时向他们展示 - 在这种情况下，用户不必担心在看到样式之前等待样式更新。

提示

  • 确保在脚本之前包含样式表。
  • 当链接多个.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

是否使用 async 选项请求导入文件。请参阅fileAsync。

env

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

运行环境可以是 development 或 production。

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

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

例如：

less = { env: 'production' };

errorReporting

类型：String

选项：html|console|function

默认值：html

设置编译失败时的错误报告方法。

fileAsync

类型：Boolean

默认值：false

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

functions（已弃用 - 使用 @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 已相对于入口 less 文件。

useFileCache

类型：Boolean

默认值：true（在 v2 之前为 false）

是否使用每个会话的文件缓存。这会缓存较少的文件，以便您可以调用 modifyVars，而它不会再次检索所有较少的文件。如果您使用观察者或调用 refresh 并将 reload 设置为 true，则在运行之前将清除缓存。


Less.js 选项

编辑“less-options”的 markdown 源

跨平台选项

包含路径
lessc --include-path=PATH1;PATH2 { paths: ['PATH1', 'PATH2'] }

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

根路径
lessc -rp=resources/
lessc --rootpath=resources/		 { rootpath: 'resources/' }

允许您向 css 中的每个生成的导入和 url 添加路径。这不会影响已处理的 Less 导入语句，只会影响保留在输出 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 Modules 结合使用，这将非常有用，后者使用类似于 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 默认值） - Less 急切地进行数学运算
  • parens-division (4.0 默认) - 在使用 / 运算符时，括号之外不执行除法（但可以使用 ./ 运算符在括号之外“强制”除法 - ./ 已弃用）
  • parens | strict - 所有数学表达式都需要括号。
  • strict-legacy（在 4.0 中已删除） - 在某些情况下，如果表达式的任何部分无法求值，则不会求值数学表达式。

always 示例

.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;
}

strict

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

输出

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

strict-legacy

在旧版 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 开始默认值为假。目前仅用于 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 文件中定义的任何内容。

URL 参数
lessc --url-args="cache726357" { urlArgs: 'cache726357' }

此选项允许你指定一个参数，以便传递到每个 URL。例如，这可用于防缓存。

行号（已弃用）
lessc --line-numbers=comments
lessc --line-numbers=mediaquery
lessc --line-numbers=all		 { dumpLineNumbers: 'comments' }

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

预加载插件

参见：预加载插件

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

运行 less 解析器，仅报告错误，无任何输出。

压缩（已弃用）
lessc --compress -x { compress: true }

使用 less 内置压缩功能进行压缩。此功能效果尚可，但并未利用专用 CSS 压缩的所有技巧。一般来说，我们建议在 Less 转换为 CSS 后，使用第三方工具对 CSS 进行清理和压缩。

允许从不安全的 HTTPS 主机导入
lessc --insecure { insecure: true }

源映射选项

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

生成源映射
lessc --source-map { sourceMap: {} }

指示 less 生成源映射。

源映射输出文件名
lessc --source-map=file.map { sourceMap: { outputFilename: 'file.map' } }

源映射根路径
lessc --source-map-rootpath=dev-files/ { sourceMap: { sourceMapRootpath: 'dev-files/' } }

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

由于基本路径默认为输入 less 文件的目录，因此根路径默认为从源映射输出文件到输入 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 文件的路径。

在源映射中包含 Less 源
lessc --source-map-include-source { sourceMap: { outputSourceFiles: true } }

此选项指定我们应将所有 Less 文件包含到源映射中。这意味着你只需要你的映射文件即可获取你的原始源。

这可以与 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 选项未生成你完全需要的内容时的用例。


预加载插件

编辑“插件”的 markdown 源

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

虽然使用插件的最简单方法是使用 @plugin at 规则，但在 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 中，需要插件并将其作为选项 plugins 数组传递给 less。例如：

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

编程使用

编辑“programmatic-usage”的 markdown 源代码

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 参数是可选的。如果您指定一个回调，则不会返回一个 promise，而如果您不指定一个回调，则会提供一个 promise。在底层，回调版本被用来让 less 可以同步使用。

如果您想渲染一个文件，您首先需要将其读入一个字符串（传递给 less.render），然后将 options 上的 filename 字段设置为主文件的 filename。less 将处理所有导入的处理。

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 中的回调或 promise


API

编辑“api”的 Markdown 源

即将推出


为 Less.js 做出贡献

编辑“developing-less”的 Markdown 源

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

安装这些工具

确保已设置路径。如果您启动最喜欢的命令行并键入 node -v，您应该会看到 node 编译器。如果您运行 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 是 node 包管理器，而“-g”会将其安装为全局可用。

你现在应该能够执行 lessc file.less，如果有合适的 file.less，它将被编译并输出到 stdout。然后，你可以将它与在本地运行（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 更改进行更新。