¥Cross-Platform Options
包含路径
¥Include Paths
|
|
lessc --include-path=PATH1;PATH2 |
{ paths: ['PATH1', 'PATH2'] } |
如果 @import
规则中的文件在该确切位置不存在,Less 将在传递给此选项的位置查找它。例如,你可以使用它来指定一个库的路径,你希望在 Less 文件中简单且相对地引用该库。
¥If the file in an @import
rule does not exist at that exact location, Less will look for it at the location(s) passed to this option. You might use this for instance to specify a path to a library which you want to be referenced simply and relatively in the Less files.
根路径
¥Rootpath
|
|
lessc -rp=resources/
lessc --rootpath=resources/ |
{ rootpath: 'resources/' } |
允许你在 css 中为每个生成的导入和 url 添加路径。这不会影响处理的 Less import 语句,只会影响输出 css 中保留的语句。
¥Allows you to add a path to every generated import and url in your css. This does not affect Less import statements that are processed, just ones that are left in the output css.
例如,如果 css 使用的所有图片都在一个名为 resources 的文件夹中,你可以使用此选项将其添加到 URL,然后可以配置该文件夹的名称。
¥For instance, if all the images the css use are in a folder called resources, you can use this option to add this on to the URL's and then have the name of that folder configurable.
重写 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 的基本文件。例如。
¥By default URLs are kept as-is (off
), so if you import a file in a sub-directory that references an image, exactly the same URL will be output in the css. This option allows you to rewrite URLs in imported files so that the URL is always relative to the base file that has been passed to Less. E.g.
@import "global/fonts.less";
@font-face {
font-family: 'MyFont';
src: url('myfont/myfont.woff2') format('woff2');
}
没有任何设置或使用 rewriteUrls: 'off'
,编译 main.less
将输出:
¥With nothing set or with rewriteUrls: 'off'
, compiling main.less
will output:
@font-face {
font-family: 'MyFont';
src: url('myfont/myfont.woff2') format('woff2');
}
使用 rewriteUrls: 'all'
,它将输出:
¥With rewriteUrls: 'all'
, it will output:
@font-face {
font-family: 'MyFont';
src: url('./global/myfont/myfont.woff2') format('woff2');
}
对于 rewriteUrls: 'local'
,它只会重写明确相关的 URL(以 .
开头的 URL):
¥With rewriteUrls: 'local'
, it will only rewrite URLs that are explicitly relative (those starting with a .
):
url('./myfont/myfont.woff2') url('./global/myfont/myfont.woff2')
url('myfont/myfont.woff2') url('myfont/myfont.woff2')
如果你将 Less 与 CSS 模块 结合使用类似 Node.js 的解析语义,这将很有用。
¥This can be useful in case you're combining Less with CSS Modules which use similar resolving semantics like Node.js.
你可能还想考虑使用 data-uri 函数而不是这个选项,它将图片嵌入到 css 中。
¥You may also want to consider using the data-uri function instead of this option, which will embed images into the css.
数学
¥Math
发布于 v3.7.0
¥Released v3.7.0
|
|
lessc -m=[option]
lessc --math=[option] |
{ math: '[option]' } |
Less 重新构建了数学选项,以提供介于之前的 strictMath
设置(一直需要括号)和默认设置(在所有情况下都执行数学运算)之间的中间特性。
¥Less has re-built math options to offer an in-between feature between the previous strictMath
setting, which required parentheses all the time, and the default, which performed math in all situations.
为了减少与现在自由地在值之间使用 /
符号的 CSS 的冲突,现在有一种数学模式只需要括号进行除法。(现在这是 Less 4 中的默认设置。)"严格的数学" 也进行了调整以更直观地操作,尽管支持旧版行为。
¥In order to cause fewer conflicts with CSS, which now liberally uses the /
symbol between values, there is now a math mode that only requires parentheses for division. (This is now the default in Less 4.) "Strict math" has also been tweaked to operate more intuitively, although the legacy behavior is supported.
math
可用的四个选项是:
¥The four options available for math
are:
always
(3.x 默认) - 不太热衷于数学
¥always
(3.x default) - Less does math eagerly
parens-division
(默认 4.0) - 使用 /
运算符在括号外不执行除法(但可以使用 ./
运算符在括号外执行 "forced" - 不推荐使用 ./
)
¥parens-division
(4.0 default) - No division is performed outside of parens using /
operator (but can be "forced" outside of parens with ./
operator - ./
is deprecated)
parens
| strict
- 所有数学表达式都需要括号。
¥parens
| strict
- Parens required for all math expressions.
strict-legacy
(4.0 中删除) - 在某些情况下,如果无法计算表达式的任何部分,则不会计算数学值。
¥strict-legacy
(removed in 4.0) - In some cases, math will not be evaluated if any part of the expression cannot be evaluated.
总是示例:
¥always
Example:
.math {
a: 1 + 1;
b: 2px / 2;
c: 2px ./ 2;
d: (2px / 2);
}
输出:
¥Outputs:
.math {
a: 2;
b: 1px;
c: 1px;
d: 1px;
}
parens-division
示例:
¥Example:
.math {
a: 1 + 1;
b: 2px / 2;
c: 2px ./ 2;
d: (2px / 2);
}
输出:
¥Outputs:
.math {
a: 2;
b: 2px / 2;
c: 1px;
d: 1px;
}
strict
.math {
a: 1 + 1;
b: 2px / 2;
c: (2px / 2) + (3px / 1);
}
输出:
¥Output:
.math {
a: 1 + 1;
b: 2px / 2;
c: 1px + 3px;
}
strict-legacy
在旧版 strictMath
模式中,括号外的混合表达式意味着不会对整个括号求值。(可能不是你想要的。)
¥In legacy strictMath
mode, mixed expressions outside of parentheses means entire parentheses won't evaluate. (Probably not what you want.)
.math {
a: 1 + 1;
b: 2px / 2;
c: (2px / 2) + (3px / 1);
}
输出:
¥Output:
.math {
a: 1 + 1;
b: 2px / 2;
c: (2px / 2) + (3px / 1);
}
严格数学(已弃用)
¥Strict Math (Deprecated)
这已被 math
选项取代。
¥This has been replaced by the math
option.
相对 URL(已弃用)
¥Relative URLs (deprecated)
|
|
lessc -ru
lessc --relative-urls |
{ relativeUrls: true } |
已被 rewriteUrls: "all"
取代
¥Has been replaced by rewriteUrls: "all"
严格单位
¥Strict Units
|
|
lessc -su=on
lessc --strict-units=on |
{ strictUnits: true } |
默认为关闭/假。
¥Defaults to off/false.
如果没有这个选项,Less 在进行数学运算时会尝试猜测输出单元。例如
¥Without this option, Less attempts to guess at the output unit when it does maths. For instance
.class {
property: 1px * 2px;
}
在这种情况下,事情显然不对劲 - 长度乘以长度得出面积,但 css 不支持指定面积。所以我们假设用户希望其中一个值是一个值,而不是长度单位,我们输出 2px
。
¥In this case, things are clearly not right - a length multiplied by a length gives an area, but css does not support specifying areas. So we assume that the user meant for one of the values to be a value, not a unit of length and we output 2px
.
启用严格单位后,我们假设这是计算中的错误并抛出错误。
¥With strict units on, we assume this is a bug in the calculation and throw an error.
IE8 兼容性(已弃用)
¥IE8 Compatibility (Deprecated)
|
|
lessc --ie-compat |
{ ieCompat: true } |
从 v3.0.0 开始默认为 False。目前仅用于 data-uri 功能,以确保不会创建太大而浏览器无法处理的图片。
¥False by default starting in v3.0.0. Currently only used for the data-uri function to ensure that images aren't created that are too large for the browser to handle.
启用内联 JavaScript(已弃用)
¥Enable Inline JavaScript (Deprecated)
|
|
lessc --js |
{ javascriptEnabled: true } |
从 v3.0.0 开始默认为 False。启用 .less
文件中内联 JavaScript 的评估。这给一些开发者带来了安全问题,他们不希望样式表的用户输入具有可执行代码。
¥False by default starting in v3.0.0. Enables evaluation of JavaScript inline in .less
files. This created a security problem for some developers who didn't expect user input for style sheets to have executable code.
替换为 @plugin
选项。
¥Replaced with the @plugin
option.
全局变量
¥Global Variables
|
|
lessc --global-var="color1=red" |
{ globalVars: { color1: 'red' } } |
该选项定义了一个可以被文件引用的变量。实际上,声明放在基本 Less 文件的顶部,这意味着它可以使用,但如果在文件中定义了这个变量,它也可以被覆盖。
¥This option defines a variable that can be referenced by the file. Effectively the declaration is put at the top of your base Less file, meaning it can be used but it also can be overridden if this variable is defined in the file.
修改变量
¥Modify Variables
|
|
lessc --modify-var="color1=red" |
{ modifyVars: { color1: 'red' } } |
与全局变量选项相反,这会将声明放在基础文件的末尾,这意味着它将覆盖 Less 文件中定义的任何内容。
¥As opposed to the global variable option, this puts the declaration at the end of your base file, meaning it will override anything defined in your Less file.
网址参数
¥URL Arguments
|
|
lessc --url-args="cache726357" |
{ urlArgs: 'cache726357' } |
此选项允许你指定一个参数以继续访问每个 URL。例如,这可以用于缓存清除。
¥This option allows you to specify a argument to go on to every URL. This may be used for cache-busting for instance.
行号(已弃用)
¥Line Numbers (Deprecated)
|
|
lessc --line-numbers=comments
lessc --line-numbers=mediaquery
lessc --line-numbers=all |
{ dumpLineNumbers: 'comments' } |
生成内联源映射。在浏览器开始支持 sourcemaps 之前,这是唯一的选择。
¥Generates inline source-mapping. This was the only option before browsers started supporting sourcemaps.
预加载插件
¥Pre-Loaded Plugin
查阅:预加载插件
¥See: Pre-Loaded Plugins
Lint
|
|
lessc --lint -l |
{ lint: true } |
运行 less 解析器并只报告错误而没有任何输出。
¥Runs the less parser and just reports errors without any output.
压缩(已弃用)
¥Compress (Deprecated)
|
|
lessc --compress -x |
{ compress: true } |
使用较少的内置压缩进行压缩。这做得不错,但没有利用专用 css 压缩的所有技巧。一般来说,我们建议在你的 Less 转换为 CSS 后,使用第三方工具清理和压缩 CSS。
¥Compress using less built-in compression. This does an okay job but does not utilise all the tricks of dedicated css compression. In general, we recommend looking at third-party tools that clean and compress CSS after your Less has been transformed to CSS.
允许从不安全的 HTTPS 主机导入
¥Allow Imports from Insecure HTTPS Hosts
|
|
lessc --insecure |
{ insecure: true } |
源映射选项
¥Source Map Options
这些选项中的大多数不适用于在浏览器中使用 Less.js,因为你应该使用预编译的 Less 文件生成源映射。
¥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: {} } |
告诉 less 生成一个 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/' } } |
指定一个根路径,该路径应添加到 sourcemap 中的每个 less 文件路径以及输出 css 中指定的映射文件的路径。
¥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.
因为 basepath 默认是 input less 文件的目录,rootpath 默认是 sourcemap 输出文件到 input less 文件的基目录的路径。
¥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.
例如,如果你在 Web 服务器的根目录中生成了一个 css 文件,但你的源 less/css/map 文件位于不同的文件夹中,请使用此选项。所以对于上面的选项你可能有
¥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/' } } |
这与 rootpath 选项相反,它指定应从输出路径中删除的路径。例如,如果你正在 less-files 目录中编译一个文件,但源文件将在你的 Web 服务器的根目录或当前目录中可用,你可以指定它以删除路径的附加 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.
在源映射中包含 Less 源
¥Include Less Source in the Source Map
|
|
lessc --source-map-include-source |
{ sourceMap: { outputSourceFiles: true } } |
此选项指定我们应该将所有 Less 文件包含到 sourcemap 中。这意味着你只需要你的映射文件即可到达你的原始来源。
¥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.
这可以与 map inline 选项结合使用,因此你根本不需要任何额外的外部文件。
¥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 } } |
此选项指定映射文件应内嵌在输出 CSS 中。这不推荐用于生产,但对于开发,它允许编译器生成单个输出文件,在支持它的浏览器中,使用已编译的 css,但向你显示未编译的 less 源。
¥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.
源映射 URL
¥Source Map URL
|
|
lessc --source-map-url=../my-map.json |
{ sourceMap: { sourceMapURL: '../my-map.json' } } |
允许你覆盖指向映射文件的 css 中的 URL。这是针对 rootpath 和 basepath 选项没有产生你需要的内容的情况。
¥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.