LESS - 在浏览器中使用 Less

当你想在需要时动态编译Less文件而不是在服务器端时，在浏览器中使用Less；这是因为 less 是一个很大的 javascript 文件。

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

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

要在页面上查找样式标签，我们需要在页面上添加以下行。它还使用编译后的 css 创建样式标签。

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

设置选项

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

例如，我们可以设置选项如下 -

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

<script src = "less.js"></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'
});

调试

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