快速入门
概览
变量（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入门文档 - 笔下光年
网站首页
浏览器使用
在浏览器中使用 Less.js 是最简单的入门方式，也便于使用 Less 进行开发，但在生产中，当性能和可靠性很重要时，我们建议使用 Node.js 或许多可用的第三方工具之一进行预编译。 首先，链接 `.less` 样式表，并将 `rel` 属性设置为 `“stylesheet/less”`： ```html <link rel="stylesheet/less" type="text/css" href="styles.less" /> ``` 接下来，下载 [less.js](https://codeload.github.com/less/less.js/zip/refs/heads/master "less.js") 并将其包含在页面 `<head>` 元素的 `<script></script>` 标记中： ```html <script src="less.js" type="text/javascript"></script> ``` ### 设置选项 你可以通过编程方式设置选项，方法是将它们设置在脚本标记之前的 less 对象上 - 这会影响所有初始链接标签和 less 的编程使用。 ```html <script> less = { env: "development", async: false, fileAsync: false, poll: 1000, functions: {}, dumpLineNumbers: "comments", relativeUrls: false, rootpath: ":/a.com/" }; </script> <script src="less.js"></script> ``` 另一种方法是在脚本标签上指定选项，例如 ```html <script> less = { env: "development" }; </script> <script src="less.js" data-env="development"></script> ``` 或者为简洁起见，可以将它们设置为脚本和链接标签上的属性： ```html <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 样式表时，每个样式表都是独立编译的。因此，你在样式表中定义的任何变量、混入或命名空间都无法在任何其他样式表中访问。 - 由于浏览器同源策略，加载外部资源需要 [启用 CORS](https://enable-cors.org/ "启用 CORS") ### 监视模式 要启用监视模式，选项 `env` 必须设置为 `development`。然后在包含 `less.js` 文件之后，调用 `less.watch()`，如下所示： ```html <script>less = { env: 'development'};</script> <script src="less.js"></script> <script>less.watch();</script> ``` 或者，你可以通过将 `#!watch` 附加到 URL 来临时启用监视模式。 ### 修改变量 启用 Less 变量的运行时修改。当使用新值调用时，Less 文件会在不重新加载的情况下重新编译。简单的基本用法： ```less less.modifyVars({ '@buttonFace': '#5B83AD', '@buttonText': '#D9EEF2' }); ``` ### 调试 可以在 CSS 中输出规则，允许工具定位规则的来源。 如上所述指定选项 `dumpLineNumbers` 或将 `!dumpLineNumbers:mediaquery` 添加到 url。 你可以将 mediaquery 选项与 [FireLESS](https://addons.mozilla.org/en-US/firefox/addon/fireless/ "FireLESS") 一起使用（它与 SCSS 媒体查询调试格式相同）。另见 [FireLess 和 Less v2](http://bassjobsen.weblogs.fm/fireless-less-v2/ "FireLess 和 Less v2")。`comment` 选项可用于在内联编译的 CSS 代码中显示文件信息和行号。 ### 选项 在加载 `less.js` 脚本之前在全局 less 对象中设置选项： ```html <!-- 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 选项](http://www.bixiaguangnian.com/manual/less/1107.html#h3-options "Less 选项")。 #### async 类型：`Boolean` 默认：`false` 是否使用异步选项请求导入文件。查阅 [fileAsync](http://www.bixiaguangnian.com/manual/less/1107.html#h4-fileasync "fileAsync")。 #### env 类型：`String` 默认：取决于页面 URL 要运行的环境可以是 `development` 或 `production`。 在生产中，你的 css 缓存在本地存储中，信息消息不会输出到控制台。 如果文档的 URL 以 `file://` 开头或位于你的本地计算机上或具有非标准端口，它将自动设置为 `development`。 例如 ```less less = { env: 'production' }; ``` #### errorReporting 类型：`String` 选项：`html|console|function` 默认：`html` 设置编译失败时报错的方式。 #### fileAsync 类型：`Boolean` 默认：`false` 在具有文件协议的页面中是否异步请求导入。 #### functions (已弃用 - 使用 @plugin) 类型：`object` 用户功能，按名称键控。 ```less less = { functions: { myfunc: function() { return less.Dimension(1); } } }; ``` 它可以像本地 Less 函数一样使用，例如 ```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 已经相对于条目较少的文件。 #### useFileCache 类型：`Boolean` 默认：`true` (以前在 v2 之前为`false`) 是否使用每个会话文件缓存。这会缓存 less 文件，以便你可以调用 modifyVars 并且它不会再次检索所有 less 文件。如果你使用 watcher 或调用 refresh 并将 reload 设置为 true，则缓存将在运行前被清除。
上一篇：
命令行用法
下一篇：
Less.js选项
