在浏览器中使用 Less

LESS - 使用客户端编译（在浏览器中）

重要提示： 在浏览器中使用 less.js 进行 LESS 客户端编译（Client-side compilation）主要用于开发目的、快速原型设计（rapid prototyping）或特定的动态主题场景（dynamic theming scenarios）。对于生产网站，强烈建议在构建步骤（build step）中将 LESS 文件预编译成静态 CSS 文件（static CSS files），以确保最佳性能并避免无样式内容闪烁（Flash of Unstyled Content, FOUC）等问题。

如果你需要在浏览器中动态编译 LESS，可以包含 less.js 脚本。

设置：

从 LESS 官方网站下载 less.js，或通过 CDN（Content Delivery Network，内容分发网络）引入。
使用 rel=“stylesheet/less” 链接你的 .less 样式表：

<head>
  <!-- Link your .less file -->
  <link rel="stylesheet/less" type="text/css" href="styles.less" />
  <!-- Include less.js script AFTER your .less links -->
  <script src="less.js" type="text/javascript"></script>
</head>

less.js 会查找所有带有 rel=“stylesheet/less” 属性的 link 标签，并在浏览器中编译它们，然后创建带有编译后 CSS 的 style 标签。

通过编程方式设置选项

你可以在包含 less.js 脚本标签之前，通过在全局 less 对象上设置选项来配置 less.js：

<script>
  window.less = {
    env: "development", // or "production"
    async: false,
    fileAsync: false,
    poll: 1000,
    dumpLineNumbers: "comments" // Or "mediaQuery"
  };
</script>
<script src="less.js" type="text/javascript"></script>

选项也可以通过 less.js 的 script 标签或 .less 文件的 individual link 标签上的 data-* 属性来设置。属性名称使用连字符命名（dash-cased）（例如，data-env）。非字符串值应符合 JSON 格式（JSON valid）。

带有 link 标签属性的示例：

<link rel="stylesheet/less" type="text/css" href="theme.less"
      data-global-vars='{ "primaryColor": "#007bff", "fontSize": "16px" }'
      data-dump-line-numbers="comments" />

监听模式（开发）

为了方便开发，监听模式（watch mode）会在你的 LESS 文件更改时自动重新编译（recompiles）它们。通过在选项中设置 env: ‘development’ 并调用 less.watch() 来启用它：

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

或者，在 URL 中添加 #!watch 也可以临时启用监听模式。

动态修改变量

less.modifyVars() 函数允许你在运行时（runtime）更改 LESS 变量并重新编译样式表。这对于实时主题定制器（live theme customizers）很有用。

// 假设你的 LESS 文件中定义了 @brand-primary 和 @text-color
less.modifyVars({
  '@brand-primary': '#FF0000', // New primary color
  '@text-color': '#333333'
});

每次调用 modifyVars 都会触发所有 LESS 文件的重新编译。

调试

将 dumpLineNumbers 选项设置为 “comments” 或 “mediaQuery”。这会在编译后的 CSS 中添加信息，将 CSS 规则链接回它们在 .less 文件中的原始行。这有助于在浏览器开发者工具（browser developer tools）中调试样式。

使用 “mediaQuery” 通常更受欢迎，因为它与浏览器源代码映射（source map）功能配合使用，提供更好的调试体验。旧的 “FireLESS” 工具已基本过时；现代浏览器开发者工具提供了更强大的功能。

常见配置选项

env：（字符串）设置为 “development” 或 “production”。影响监听模式和错误报告。
async：（布尔值）是否异步请求导入文件。默认值：false。
fileAsync：（布尔值）当页面通过 file:// 协议加载时，是否异步请求导入文件。默认值：false。
poll：（整数）监听模式的轮询间隔（毫秒）。默认值：1000。
dumpLineNumbers：（字符串）如何包含行号信息以用于调试。选项：“comments”、“mediaQuery” 或 “all”（已弃用）。
relativeUrls：（布尔值）LESS 是否应调整 URL 使其相对于入口 LESS 文件。如果为 false（默认值），则假定 URL 相对于导入的文件。
rootpath：（字符串）添加到每个 URL 资源开头的路径。
globalVars：（对象）一个映射表，包含所有 LESS 文件可用的全局变量。变量在文件开头注入。字符串值必须在字符串内部使用双引号（例如，’“#FFF”’）。
modifyVars：（对象）类似于 globalVars，但这些变量 effectively 在 LESS 文件末尾添加，并且可以与 less.modifyVars() 一起用于动态更新。
logLevel：（数字）控制控制台日志记录：2（信息和错误）、1（错误）、0（无）。
useFileCache：（布尔值，默认值：true）是否在会话中缓存编译后的 LESS 文件。可以通过避免不必要的重新获取文件来提高 modifyVars 的性能。

有关最新和详细的选项列表，请始终参考 LESS 官方文档。