跳到主要内容

Less.js 选项

包含路径（Include Paths）​

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

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

根路径（Rootpath）​

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

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

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

Rewrite URLs​

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') /* 变成 */ url('./global/myfont/myfont.woff2')
url('myfont/myfont.woff2') /* 保持不变 */ url('myfont/myfont.woff2')

这在将 Less 与 CSS Modules 结合使用时非常有用，因为它们使用类似 Node.js 的解析语义。

你还可以考虑使用 data-uri 函数而不是此选项，它将图像嵌入到 CSS 中。

Math​

发布于 v3.7.0

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

Less 重新构建了 Math 选项，以提供介于以前的 strictMath 设置（需要始终使用括号）和默认设置之间的功能，后者在所有情况下执行 Math 运算。

为了减少与 CSS 的冲突，CSS 现在在值之间自由使用 / 符号，因此现在有一个 Math 模式，仅需要在除法时使用括号。 （这是 Less 4 中的默认设置。）"Strict math" 也已经进行了微调，以更直观地操作，尽管支持旧的行为。

math 可用的四个选项是：

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

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

Strict Math 计算（已弃用）​

已被 math 选项取代。

相对 URL（已弃用）​

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

已被 rewriteUrls: "all" 取代。

Strict Units​

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

默认为 off/false。

如果没有这个选项，Less 会在进行 Math 计算时尝试猜测输出 Units。例如：

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

在这种情况下，显然不对——长度乘以长度得到的是面积，但 CSS 不支持指定面积。因此我们假设用户��望其中一个值是一个值，而不是长度 Units，我们输出 2px。

开启 Strict Units 时，我们假设这是计算中的错误，并抛出一个错误。

IE8 兼容性（已弃用）​

lessc --ie-compat{ ieCompat: true }

从 v3.0.0 开始默认为假。目前仅用于 data-uri 函数，以确保不会创建对浏览器处理过大的图像。

启用内联 JavaScript（已弃用）​

lessc --js{ javascriptEnabled: true }

从 v3.0.0 开始默认为假。启用在 .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 }

源映射（Source Map）​

这些选项大多不适用于在浏览器中使用 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 源代码。

将所有的 Less 文件编译到源映射中。这意味着你只需要使用映射文件即可访问原始源代码。

这可以与 map inline 选项一起使用，这样你就不需要任何额外的外部文件。

Source Map Map Inline​

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

此选项指定映射文件应内联在输出 CSS 中。这不建议用于生产，但对于开发，它允许编译器生成单个输出文件，在支持它的浏览器中，使用编译后的 CSS，但显示你的非编译的 Less 源代码。

Source Map URL​

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

允许你覆盖指向映射文件的 CSS 中的 URL。这适用于当 rootpath 和 basepath 选项未完全满足你的需求时。