Edit the markdown source for "less-options"
跨平台选项
包含路径
|
|
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 中,并使该文件夹名称可配置。
重写 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 的基本文件。例如:
@import "global/fonts.less";
@font-face {
font-family: 'MyFont';
src: url('myfont/myfont.woff2') format('woff2');
}
未设置或使用 rewriteUrls: 'off'
编译 main.less
将输出:
@font-face {
font-family: 'MyFont';
src: url('myfont/myfont.woff2') format('woff2');
}
使用 rewriteUrls: 'all'
将输出:
@font-face {
font-family: 'MyFont';
src: url('./global/myfont/myfont.woff2') format('woff2');
}
使用 rewriteUrls: 'local'
,它只会重写明确的相对 URL(以 .
开头的):
url('./myfont/myfont.woff2') url('./global/myfont/myfont.woff2')
url('myfont/myfont.woff2') url('myfont/myfont.woff2')
这在与使用类似 Node.js 解析语义的 CSS 模块 结合时可能很有用。
你可能还想考虑使用 data-uri 函数代替此选项,它会将图像嵌入到 CSS 中。
数学运算
发布于 v3.7.0
|
|
lessc -m=[选项]
lessc --math=[选项] |
{ math: '[选项]' } |
Less 重新构建了数学选项,以在之前需要始终使用括号的 strictMath
设置和默认情况下在所有情况下执行数学运算之间提供一个中间特性。
为了减少与 CSS 的冲突(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
选项替代。
相对 URLs(已弃用)
|
|
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 文件中定义的任何内容。
URL 参数
|
|
lessc --url-args="cache726357" |
{ urlArgs: 'cache726357' } |
此选项允许你为每个 URL 指定一个参数。例如,这可以用于缓存破坏。
行号(已弃用)
|
|
lessc --line-numbers=comments
lessc --line-numbers=mediaquery
lessc --line-numbers=all |
{ dumpLineNumbers: 'comments' } |
生成内联源映射。这是在浏览器开始支持源映射之前的唯一选项。
预加载插件
参见:预加载插件
代码检查
|
|
lessc --lint -l |
{ lint: true } |
运行 Less 解析器并仅报告错误,不生成任何输出。
压缩(已弃用)
|
|
lessc --compress -x |
{ compress: true } |
使用 Less 内置压缩。这做得还不错,但没有利用专用 CSS 压缩的所有技巧。通常,我们建议使用第三方工具在 Less 转换为 CSS 后清理和压缩 CSS。
允许从不安全的 HTTPS 主机导入
|
|
lessc --insecure |
{ insecure: true } |
Source Map Options
Most of these options are not applicable to using Less.js in the browser, as you should generate a source map with your pre-compiled Less files.
Generate a Source Map
|
|
lessc --source-map |
{ sourceMap: {} } |
Tells less to generate a sourcemap.
Source Map Output Filename
|
|
lessc --source-map=file.map |
{ sourceMap: { outputFilename: 'file.map' } } |
Source Map Rootpath
|
|
lessc --source-map-rootpath=dev-files/ |
{ sourceMap: { sourceMapRootpath: 'dev-files/' } } |
Specifies a rootpath that should be prepended to each of the less file paths inside the sourcemap and also to the path to the map file specified in your output css.
Because the basepath defaults to the directory of the input less file, the rootpath defaults to the path from the sourcemap output file to the base directory of the input less file.
Use this option if for instance you have a css file generated in the root on your web server but have your source less/css/map files in a different folder. So for the option above you might have
output.css
dev-files/output.map
dev-files/main.less
Source Map Basepath
|
|
lessc --source-map-basepath=less-files/ |
{ sourceMap: { sourceMapBasepath: 'less-files/' } } |
This is the opposite of the rootpath option, it specifies a path which should be removed from the output paths. For instance if you are compiling a file in the less-files directory but the source files will be available on your web server in the root or current directory, you can specify this to remove the additional less-files
part of the path.
It defaults to the path to the input less file.
Include Less Source in the Source Map
|
|
lessc --source-map-include-source |
{ sourceMap: { outputSourceFiles: true } } |
This option specifies that we should include all of the Less files in to the sourcemap. This means that you only need your map file to get to your original source.
This can be used in conjunction with the map inline option so that you do not need to have any additional external files at all.
Source Map Map Inline
|
|
lessc --source-map-inline |
{ sourceMap: { sourceMapFileInline: true } } |
This option specifies that the map file should be inline in the output CSS. This is not recommended for production, but for development it allows the compiler to produce a single output file which in browsers that support it, use the compiled css but show you the non-compiled less source.
Source Map URL
|
|
lessc --source-map-url=../my-map.json |
{ sourceMap: { sourceMapURL: '../my-map.json' } } |
Allows you to override the URL in the css that points at the map file. This is for cases when the rootpath and basepath options are not producing exactly what you need.