LESS - 在浏览器中使用 LESS

当您需要动态编译 LESS 文件而不是在服务器端编译时，LESS 用于浏览器；这是因为 LESS 是一个大型 JavaScript 文件。

首先，我们需要添加 LESS 脚本以便在浏览器中使用 LESS：

<script src = "less.js"></script>

为了找到页面上的 style 标签，我们需要在页面上添加以下代码行。它还会创建包含已编译 CSS 的 style 标签。

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

设置选项

在 script 标签之前，可以在 less 对象上以编程方式设置选项。这将影响所有 less 的编程用法和初始链接标签。

例如，我们可以按如下方式设置选项：

<script>
   less = {
      env: "development"
   };
</script>

<script src = "less.js"></script>

我们也可以在 script 标签上以另一种格式设置选项，如下所示：

<script>
   less = {
      env: "development"
   };
</script>

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

您也可以将这些选项添加到链接标签中。

<link data-dump-line-numbers = "all" 
   data-global-vars = '{ "var": "#fff", "str": "\"quoted\"" }' 
   rel = "stylesheet/less" type = "text/css" href = "less/style.less">

需要考虑的属性选项要点：

window.less < script 标签 < link 标签 是重要性级别。
数据属性不能使用驼峰命名法；链接标签选项表示为时间选项。
具有非字符串值的数据属性应为 JSON 有效的。

观察模式

可以通过将 env 选项设置为 development 并添加 less.js 文件后调用 less.watch() 来启用观察模式。如果您想临时启用观察模式，则向 URL 添加 #!watch。

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

修改变量

启用了 LESS 变量的运行时修改。调用新值时，LESS 文件将重新编译。以下代码显示了修改变量的基本用法：

less.modifyVars({
   '@buttonFace': '#eee',
   '@buttonText': '#fff'
});

调试

我们可以向 url 添加选项 !dumpLineNumbers:mediaquery 或如上所述添加 dumpLineNumbers 选项。mediaquery 选项可与 FireLESS 一起使用（它显示 LESS 生成的 CSS 样式的原始 LESS 文件名和行号）。

选项

在加载脚本文件 less.js 之前，必须在全局 less 对象中设置选项。

<script>
   less = {
      env: "development",
      logLevel: 2,
      async: false,
      fileAsync: false,
      poll: 1000,
      functions: {},
      dumpLineNumbers: "comments",
      relativeUrls: false,
      globalVars: {
         var1: '"string value"',
         var2: 'regular value'
      },
      rootpath: ":/a.com/"
   };
</script>

<script src = "less.js"></script>

async - 布尔类型。无论是否使用 async 选项，都会请求导入的文件。默认值为 false。
dumpLineNumbers - 字符串类型。当设置 dumpLineNumbers 时，会在输出的 css 文件中添加源代码行信息。这有助于调试特定规则的来源。
env - 字符串类型。env 可以在开发或生产环境中运行。当文档 URL 以 file:// 开头或位于本地计算机上时，会自动设置 Development。
errorReporting - 编译失败时，可以设置错误报告方法。
fileAsync - 布尔类型。当页面存在文件协议时，它可以请求是否异步导入。
functions - 对象类型。
logLevel - 数字类型。它在 javascript 控制台中显示日志级别。
- 2：信息和错误
- 1：错误
- 0：无
poll - 在观察模式下，时间以毫秒显示轮询之间的间隔。它是整数类型；默认设置为 1000。
relativeUrls - 调整 URL 为相对 URL；默认情况下，此选项设置为 false。这意味着 URL 已经相对于入口 less 文件。
globalVars - 将全局变量列表插入代码中。字符串类型变量应包含在引号中。
modifyVars - 与全局变量选项不同。它将声明移动到 less 文件的末尾。
rootpath - 在每个 URL 资源的开头设置路径。
useFileCache - 使用每个会话的文件缓存。less 文件中的缓存用于调用 modifyVars，其中所有 less 文件都不会再次检索。

打印页面