跳到主要内容

浏览器使用

在浏览器中使用 Less.js 是入门的最简单方式，也方便使用 Less 进行开发，但在生产环境中，当性能和可靠性很重要时，我们建议使用 Node.js 或众多第三方工具进行预编译。

首先，将你的 .less 样式表链接到 rel 属性设置为 "stylesheet/less"：

<link rel="stylesheet/less" type="text/css" href="styles.less" />

接下来，下载 less.js 并在页面的 <head> 元素中包含它在 <script></script> 标签中：

<script src="less.js" type="text/javascript"></script>

设置选项（Options）​

你可以通过编程方式设置选项，方法是在脚本标记之前的 less 对象上设置它们，这将影响所有初始链接标记和 less 的编程使用。

<script>
  less = {
    env: "development",
    async: false,
    fileAsync: false,
    poll: 1000,
    functions: {},
    dumpLineNumbers: "comments",
    relativeUrls: false,
    rootpath: ":/a.com/"
  }
</script>
<script src="less.js"></script>

另一种方法是在脚本标记上指定选项，例如：

<script>
  less = {
    env: "development"
  }
</script>
<script src="less.js" data-env="development"></script>

或者为了简洁起见，它们可以设置为脚本（script）和链接标签（link）的属性：

<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。

在生产中使用客户端 less 的原因有很多，例如如果你想允许用户调整会影响主题的变量，并且你想实时向他们展示 - 在这种情况下，用户不必担心在看到样式更新之前等待。

提示（Tips）​

  • 确保在脚本之前包含样式表。
  • 当你链接多个 .less 样式表时，它们中的每一个都会独立编译。因此，你在样式表中定义的任何变量、混合或命名空间都无法在其它样式表中访问。
  • 由于浏览器的同源策略，加载外部资源需要启用 CORS。

Watch 模式​

要启用 Watch 模式，必须将选项 env 设置为 development。然后在包含 less.js 文件之后，调用 less.watch()，如下所示：

<script>
  less = { env: "development" }
</script>
<script src="less.js"></script>
<script>
  less.watch()
</script>

或者，你可以通过在 URL 后附加 #!watch 来临时启用 Watch 模式。

修改变量（Variables）​

启用 Less 变量的运行时修改。调用时，Less 文件将在不重新加载的情况下重新编译。简单的基本用法：

less.modifyVars({
  "@buttonFace": "#5B83AD",
  "@buttonText": "#D9EEF2"
})

调试（Debugging）​

可以在 CSS 中输出规则，以便工具可以定位规则的源。

可以像上面那样指定选项 dumpLineNumbers，也可以在 URL 中添加 !dumpLineNumbers:mediaquery。

你可以使用 FireLESS 中的 mediaquery 选项（它与 SCSS 媒体查询调试格式相同）。还请参阅 FireLess 和 Less v2。comment 选项可用于在内联编译的 CSS 代码中显示文件信息和行号。

选项（Options）​

在加载 less.js 脚本之前，在全局 less 对象中设置选项：

<!-- 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 选项。

async​

类型：布尔值（Boolean）

默认值：false

是否使用 async 选项请求导入文件。请参见 fileAsync。

env​

类型：字符串

默认值：取决于页面 URL

要运行的环境可以是 development 或 production。

在生产环境中，你的 CSS 会被缓存在本地存储中，并且不会在控制台输出信息消息。

如果文档的 URL 以 file:// 开头，或者在你的本地计算机上，或者具有非标准端口，则会自动设置为 development。

例如：

less = { env: "production" }

errorReporting​

类型：字符串

选项：html|console|function

默认值：html

设置编译失败时的错误报告方法。

fileAsync​

类型：布尔值（Boolean）

默认值：false

在具有文件协议的页面中是否异步请求导入。

functions（已弃用 - 使用 @plugin）​

类型：对象

用户函数，按名称键入。

less = {
  functions: {
    myfunc: function () {
      return less.Dimension(1)
    }
  }
}

它可以像本机 Less 函数一样使用，例如：

.my-class {
  border-width: unit(myfunc(), px);
}

logLevel​

类型：Number

默认值：2

在 JavaScript 控制台中记录的日志量。注意：如果你处于 production 环境中，你将不会得到任何日志记录。

2 - 信息和错误
1 - 错误
0 - 无

poll​

类型：Integer

默认值：1000

在监视模式下轮询之间的时间（以毫秒为单位）。

relativeUrls​

类型：布尔值（Boolean）

默认值：false

可选地调整 URL 为相对 URL。当为 false 时，URL 已经相对于入口 less 文件。

useFileCache​

类型：布尔值（Boolean）

默认值：true（之前为 v2 之前的 false）

是否使用每个会话文件缓存。这会缓存 less 文件，以便你可以调用 modifyVars，它不会再次检索所有 less 文件。 如果你使用监视器或调用刷新并重新加载页面，则应将其设置为 false。

如果将 d 设置为 true，则在运行之前将清除缓存。