浏览器使用

在浏览器中使用 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

<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，则缓存将在运行前被清除。