快速入门
概览
变量（Variables）
混入（Mixins）
嵌套（Nesting）
运算（Operations）
转义（Escaping）
函数（Functions）
命名空间和访问符
映射（Maps）
作用域（Scope）
注释（Comments）
导入（Importing）
使用 Less.js
命令行用法
浏览器使用
Less.js选项
预加载插件
程序化使用
API
为 Less.js 做贡献
Less 函数手册
逻辑函数
字符串函数
列表函数
数学函数
类型函数
杂项函数
颜色定义函数
颜色通道函数
颜色操作函数
颜色混合函数
进阶指南
变量
父选择器
继承
合并
Mixins
CSS Guards
分离规则集
@import At-Rules
@plugin At-Rules
Maps (NEW!)
作用域
Less.js选项 - Less入门文档 - IT书包
网站首页
Less.js选项
### 跨平台参数 ### 包含路径 ```less lessc --include-path=PATH1;PATH2 { paths: ['PATH1', 'PATH2'] } ``` 如果 `@import` 规则中的文件不存在于该确切位置，Less 将在该选项传递的位置查找它。例如，你可以用它来指定一个库的路径，以便在 Less 文件中简单、相对地引用该库。 ### 根路径 ```less lessc -rp=resources/ { rootpath: 'resources/' } lessc --rootpath=resources/ ``` 允许在 css 中为每个生成的导入和 url 添加路径。这不会影响已处理的导入语句，只会影响输出 css 中的导入语句。 例如，如果 css 使用的所有图片都在一个名为 resources 的文件夹中，你可以使用此选项将其添加到 URL 中，然后配置该文件夹的名称。 ### 重写 URL ```less lessc -ru=off { rewriteUrls: 'off' } lessc --rewrite-urls=off lessc -ru=all { rewriteUrls: 'all' } lessc --rewrite-urls=all lessc -ru=local { rewriteUrls: 'local' } lessc --rewrite-urls=local ``` 默认情况下，URL 会保持原样 (`off`)，因此如果你导入一个子目录中引用图片的文件，css 中将输出完全相同的 URL。此选项允许你重写导入文件中的 URL，使 URL 始终相对于传递给 Less 的基础文件。例如 ```less /* main.less */ @import "global/fonts.less"; ``` ```less /* global/fonts.less */ @font-face { font-family: 'MyFont'; src: url('myfont/myfont.woff2') format('woff2'); } ``` 如果没有设置或使用 `rewriteUrls: 'off'`，编译 `main.less` 时将输出结果： ```css /* main.less */ /* global/fonts.less */ @font-face { font-family: 'MyFont'; src: url('myfont/myfont.woff2') format('woff2'); } ``` 如果 `rewriteUrls: 'all'`，就会输出： ```css /* main.less */ /* global/fonts.less */ @font-face { font-family: 'MyFont'; src: url('./global/myfont/myfont.woff2') format('woff2'); } ``` 如果使用 `rewriteUrls: 'local'`，则只会重写明确相对的 URL（以 `.` 开头的 URL）： ```less url('./myfont/myfont.woff2') /* becomes */ url('./global/myfont/myfont.woff2') url('myfont/myfont.woff2') /* stays */ url('myfont/myfont.woff2') ``` 如果您将 Less 与 [CSS Modules](https://github.com/css-modules/css-modules "CSS Modules")（与 Node.js 使用类似的解析语义）结合使用，这将非常有用。 您也可以考虑使用 `data-uri` 函数，而不是此选项，后者会将图片嵌入到 css 中。 ### 数学 发布于 v3.7.0 ```less lessc -m=[option] { math: '[option]' } lessc --math=[option] ``` Less 重新构建了数学选项，在之前的 `strictMath` 设置和默认设置之间提供了一种介于两者之间的功能，前者要求在所有情况下都使用小括号，而后者则在所有情况下都执行数学运算。 为了减少与 CSS 的冲突（CSS 现在会在数值之间随意使用 `/` 符号），现在有一种数学模式只要求在除法时使用括号。(这是 Less 4 的默认设置）。"Strict math" 也进行了调整，使操作更直观，但仍支持旧版的行为。 可用于 `math` 运算的选项有 - `always`（3.x 默认） - 不太热衷于数学 - `parens-division` （4.0 默认） - 使用 `/` 运算符在括号外不执行除法（但可以使用 `./` 运算符在括号外执行 "forced" - 不推荐使用 `./`） - `parens` | `strict` - 所有数学表达式都需要括号。 - `strict-legacy` （4.0 中删除） - 在某些情况下，如果无法计算表达式的任何部分，则不会计算数学值。 #### always 示例: ```less .math { a: 1 + 1; b: 2px / 2; c: 2px ./ 2; d: (2px / 2); } ``` 输出: ```less .math { a: 2; b: 1px; c: 1px; d: 1px; } ``` #### parens-division 示例: ```less .math { a: 1 + 1; b: 2px / 2; c: 2px ./ 2; d: (2px / 2); } ``` 输出: ```less .math { a: 2; b: 2px / 2; c: 1px; d: 1px; } ``` #### strict ```less .math { a: 1 + 1; b: 2px / 2; c: (2px / 2) + (3px / 1); } ``` 输出: ```less .math { a: 1 + 1; b: 2px / 2; c: 1px + 3px; } ``` #### strict-legacy 在旧版 `strictMath` 模式中，括号外的混合表达式意味着不会对整个括号求值。（可能不是你想要的。） ```less .math { a: 1 + 1; b: 2px / 2; c: (2px / 2) + (3px / 1); } ``` 输出: ```less .math { a: 1 + 1; b: 2px / 2; c: (2px / 2) + (3px / 1); } ``` #### Strict Math (已弃用) 这已被 `math` 选项取代。 #### Relative URLs (已弃用) ```less lessc -ru { relativeUrls: true } lessc --relative-urls ``` 已被 `rewriteUrls: "all"` 取代 ### Strict Units ```less lessc -su=on { strictUnits: true } lessc --strict-units=on ``` 默认为 `off/false`。 如果没有这个选项，Less 在进行数学运算时会尝试猜测输出单位。例如 ```less .class { property: 1px * 2px; } ``` 在本例中，情况显然不对--长度乘以长度得出面积，但 css 不支持指定面积。因此，我们假设用户希望其中一个值是一个数值，而不是长度单位，然后输出 `2px`。 在使用严格单位的情况下，我们会认为这是计算中的一个错误，并抛出一个错误。 #### IE8 兼容性（已弃用） ```less lessc --ie-compat { ieCompat: true } ``` 从 v3.0.0 版开始默认为 `false`。目前仅用于 `data-uri` 函数，以确保创建的图片不会太大，浏览器无法处理。 #### 启用内联 JavaScript (已弃用) ```less lessc --js { javascriptEnabled: true } ``` 从 v3.0.0 版开始默认为 `false`。启用对 .less 文件中的 JavaScript 进行内联评估。这给一些开发人员带来了安全问题，因为他们不希望用户输入的样式表包含可执行代码。 替换为 `@plugin` 选项。 #### 全局变量 ```less lessc --global-var="color1=red" { globalVars: { color1: 'red' } } ``` 该选项定义了一个可被文件引用的变量。实际上，该声明会放在 Less 基本文件的顶部，这意味着它可以被使用，但如果文件中定义了该变量，它也可以被覆盖。 #### 修改变量 ```less lessc --modify-var="color1=red" { modifyVars: { color1: 'red' } } ``` 与全局变量选项不同，该选项将声明放在基础文件的末尾，这意味着它将覆盖 Less 文件中定义的任何内容。 #### URL 参数 ```less lessc --url-args="cache726357" { urlArgs: 'cache726357' } ``` 该选项允许你为每个 URL 指定一个参数。例如，这可用于缓存清除。 #### 行号（已弃用） ```less lessc --line-numbers=comments { dumpLineNumbers: 'comments' } lessc --line-numbers=mediaquery lessc --line-numbers=all ``` 生成内联源映射。在浏览器开始支持源映射之前，这是唯一的选择。 #### 预加载插件 查阅：[预加载插件](http://www.bixiaguangnian.com/manual/less/1109.html "预加载插件") #### Lint ```less lessc --lint -l { lint: true } ``` 运行 less 解析器并只报告错误而没有任何输出。 #### Compress (已弃用) ```less lessc --compress -x { compress: true } ``` 使用较少的内置压缩进行压缩。这做得不错，但没有利用专用 css 压缩的所有技巧。一般来说，我们建议在你的 Less 转换为 CSS 后，使用第三方工具清理和压缩 CSS。 #### 允许从不安全的 HTTPS 主机导入 ```less lessc --insecure { insecure: true } ``` ### 源映射选项 这些选项中的大多数不适用于在浏览器中使用 Less.js，因为你应该使用预编译的 Less 文件生成源映射。 #### 生成源映射 ```less lessc --source-map { sourceMap: {} } ``` 告诉 less 生成一个 sourcemap。 #### 源映射输出文件名 ```less lessc --source-map=file.map { sourceMap: { outputFilename: 'file.map' } } ``` #### 源映射根路径 ```less lessc --source-map-rootpath=dev-files/ { sourceMap: { sourceMapRootpath: 'dev-files/' } } ``` 指定一个根路径，该路径应添加到 `sourcemap` 中的每个 less 文件路径以及输出 css 中指定的映射文件的路径。 由于 `basepath` 默认为 input less 文件的目录，因此 `rootpath` 默认为源代码贴图输出文件到 input less 文件基本目录的路径。 举例来说，如果你在网络服务器的根目录下生成了 css 文件，但你的源 `less/css/map` 文件却在另一个文件夹下，请使用该选项。因此，对于上面的选项，你可能需要 ```less output.css dev-files/output.map dev-files/main.less ``` #### 源映射基本路径 ```less lessc --source-map-basepath=less-files/ { sourceMap: { sourceMapBasepath: 'less-files/' } } ``` 这与 `rootpath` 选项相反，它指定了一个应从输出路径中删除的路径。例如，如果你正在编译 `less-files` 目录下的文件，但源文件将在 Web 服务器的根目录或当前目录下提供，你可以指定该选项来删除路径中额外的 `less-files` 部分。 默认路径为输入 less 文件的路径。 #### 在源映射中包含 Less 源 ```less lessc --source-map-include-source { sourceMap: { outputSourceFiles: true } } ``` 该选项指定我们应将所有 Less 文件包含到 `sourcemap` 中。这意味着你只需使用你的 map 文件就能访问原始源代码。 该选项可与 `map inline` 选项结合使用，这样就不需要任何额外的外部文件了。 #### 源映射映射内联 ```less lessc --source-map-inline { sourceMap: { sourceMapFileInline: true } } ``` 该选项指定 map 文件应内嵌到输出 CSS 中。不建议在生产中使用，但在开发中，编译器可以生成一个单一的输出文件，在支持它的浏览器中，可以使用编译后的 CSS，但会显示未编译的 less 源。 #### 源映射 URL ```less lessc --source-map-url=../my-map.json { sourceMap: { sourceMapURL: '../my-map.json' } } ``` 允许你覆盖 css 中指向 map 文件的 URL。当 `rootpath` 和 `basepath` 选项不能完全满足您的需求时，可以使用此功能。
上一篇：
浏览器使用
下一篇：
预加载插件
