Less 在浏览器中使用

🌙
手机阅读
本文目录结构

Less可以在客户端上运行(IE6+、Webkit、Firefox),也可以在服务端运行(Node.js、Rhino)。

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

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

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

要在页面上找到样式标签,我们需要在页面上添加以下行。 它还创建带有编译css的样式标签。

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

设置选项

在脚本标记之前,可以通过编程方式在较少的对象上设置选项。 它将影响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是重要性级别。
  • 无法在camel中写入数据属性,并将链接标记选项表示为时间选项。
  • 具有非字符串值的数据属性应为JSON有效。

观看模式

可以通过将 env 选项设置为开发并在添加less.js文件后调用 less.watch()来启用观看模式 。 如果您希望暂时启用观看模式,请将#!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之前,必须在全局_少于_对象中设置选项。

<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:**网址调整为相对,默认情况下,它设置为false,这意味着网址已经相对于条目少文件。 它是一个布尔类型。

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

  • **modifyVars:**它与全局变量选项相反,它移动您的less文件末尾的声明。

  • **rootpath:**它设置每个URL资源开始时的路径。

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


AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili

关注我: Github / 知乎

于2021年离开前端领域,目前重心放在研究区块链上面了

我叫朱安邦,阿西河的站长

目前在杭州从事区块链周边的开发工作,机械专业,以前从事平面设计工作。

2014年底脱产在老家自学6个月的前端技术,自学期间几乎从未出过家门,最终找到了满意的前端工作。更多>

于2021年离开前端领域,目前从事区块链方面工作了