目录

在浏览器中使用较少(Using Less In The Browser)

如果要在需要时动态编译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 tag 《 link tag是重要性级别。

  • 数据属性不能用驼峰写成; 链接标记选项表示为时间选项。

  • 具有非字符串值的数据属性应该是JSON有效的。

观看模式

可以通过将env选项设置为development来启用监视模式,并在添加less.js文件后调用less.watch() 。 如果您希望临时启用监视模式,请将#!watch添加到URL。

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

修改变量

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

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

调试(Debugging)

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

选项 (Options)

在加载脚本文件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 - 它是一种字符串类型。 在输出css文件中,在设置dumpLineNumbers时添加源行信息。 它有助于调试来自的特定规则。

  • env - 这是一个字符串类型。 env可以在开发或生产上运行。 当文档URL以file://开头或者它存在于本地计算机中时,将自动设置开发。

  • errorReporting - 编译失败时,可以设置错误报告方法。

  • fileAsync - 它是一个布尔类型。 当页面存在文件协议时,它可以请求是否异步导入。

  • functions - 它是对象类型。

  • logLevel - 这是一种数字类型。 它在javascript控制台中显示日志记录级别。

    • 2:信息和错误

    • 1:错误

    • 0:没什么

  • poll - 在监视模式下,时间显示在轮询之间以毫秒为单位。 它是整数类型; 默认情况下,它设置为1000。

  • relativeUrls - URL调整为相对; 默认情况下,此选项设置为false。 这意味着URL已经与较少的文件相对。 它是一种布尔类型。

  • globalVars - 将全局变量列表插入代码中。 字符串类型变量应包含在引号中

  • modifyVars - 与全局变量选项不同。 它会在您的less文件末尾移动声明。

  • rootpath - 它在每个URL资源的开头设置路径。

  • useFileCache - 使用每个会话文件缓存。 较少文件中的缓存用于调用modifyVars,其中所有较少的文件将不再检索。

↑回到顶部↑
WIKI教程 @2018