Less 的使用方法

Posted Web先生的博客

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Less 的使用方法相关的知识,希望对你有一定的参考价值。

Less 的使用方法

Less 可以直接在浏览器端运行(支持IE6+、Webkit、Firefox),也可以借助Node.js或者Rhino在服务端运行。

Less是一种动态语言,无论是在浏览器端,还是在服务器端运行,最终还是需要编译成 CSS,才会发挥其作用。

浏览器端使用

在浏览器端直接使用Less,浏览器会直接为页面应用编译后的CSS样式,而不是生成单独的CSS文件。

在浏览器端直接使用Less,需要一个脚本的支持,这个脚本就是Less.js,它Less解析器,可以在浏览器端把 .less 文件解析成CSS样式。你可以从 http://Lesscss.org下载最新版本的Less.js。

浏览器端使用Less,只需两步:

第一步,引入 .less 文件。

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

可以看出,Less 源文件与标准 CSS 文件的引入方式完全相同,只是在引入 .less 文件时,要将 rel 属性设置为“stylesheet/less”。

第二步,引入Less.js文件。

  1. <script src="Less.js" type="text/javascript"></script>

需要特别注意的是:

1).less 样式文件一定要在 Less.js之前引入,这样才能保证 .less 文件被正确编译。

2)由于浏览器端使用Less时,是使用 ajax 来拉取 .less 文件,如果直接在本机文件系统打开(即地址是file://开头)或者是有跨域的情况下,会拉取不到 .less 文件,导致样式无法生效。因此,必须在http(s)协议下使用,即必须在服务器环境下使用。

3)还有一种情况容易导致样式无法生效,就是部分服务器(以IIS居多)会对未知后缀的文件返回404,导致无法正常读取 .less文件。解决方案是,在服务器中为 .less 文件配置MIME值为 text/css。一种更简单的方法,就是直接将 .less 文件改名为 .css 文件即可。

在开发阶段,在页面中嵌入一个 Less.js 将Less在线编译成CSS样式,确实很方便。但是,在线编译会产生加载延迟,即便在浏览器中有不足一秒的加载延迟,也会降低性能。如果Javascrip执行错误,还会引起美观问题。因此,在生产环境中,并不推荐这种方式,而是推荐在服务器端使用Less

服务器端使用

在服务器端使用Less,需要借助于 Less 的编译器,由它将 Less 源文件编译成最终的 CSS 文件。最常用方式,就是利用 node 的包管理器 (npm) 进行安装,安装成功后就可以在 node 环境中对Less源文件进行编译。

安装Less编译器

为了方便使用 Lessc 这个全局命令,建议采用全局安装。安装命令如下:

  1. $ npm install Less -g

如果想安装指定版本,也非常方便,只需在安装包后添加 @VERSION即可。如,安装1.6.2版本的命令如下:

  1. $ npm install [email protected].6.2 -g

当然,如果你想安装最新版本,可以尝试以下命令:

  1. $ npm install [email protected] -g

整个安装过程无需人工干预,安装完成后的结果如图 1?1 所示:

技术分享图片图1-1  安装Less编译器

代码中用法

只要安装了 Less,就可以在Node中像这样调用编译器:

  1. var Less = require(‘Less‘);
  2. Less.render(‘.class { width: 1 + 1 }‘, function (e, css) {
  3.     console.log(css);
  4. });

经过编译生成的 CSS 代码为:

  1. .class {
  2.   width: 2;
  3. }

你也可以手动调用解析器和编译器:

  1. var parser = new(Less.Parser);
  2. parser.parse(‘.class { width: 1 + 1 }‘, function (err, tree) {
  3.     if (err) { return console.error(err) }
  4.     console.log(tree.toCSS());
  5. });

命令行用法

也可以使用命令行,将 Less文件编译成静态的CSS文件,然后在html文档中直接引入CSS文件,而不是Less文件。只需将命令行切换到 styles.less 文件所在的目录,并执行 Lessc 命令即可。命令如下:

  1. $ Lessc styles.less

上面的命令会将编译后的 CSS 输出到 stdout。如果希望将CSS代码保存到指定的文件中,就可以使用以下命令:

  1. $ Lessc styles.less styles.css

上述命令就会将 styles.less 文件编译后的CSS代码保存到 styles.css 文件中。如何你希望编译后得到压缩的CSS,只需提供一个 -x 参数就可以了。命令如下:

  1. $ Lessc styles.less styles.css -x

以上是关于Less 的使用方法的主要内容,如果未能解决你的问题,请参考以下文章

使用bootstrap的原因是啥

我的less学习之路

less快速入门

less快速入门

使用针对颜色类的样式重构 LESS 代码

Vue项目中如何使用less(添加less依赖)