6.3.2 Less的两种用法

发表于 更新于 分类于 ， ， Waline： 本文字数： 3.5k 阅读时长 ≈ 3 分钟

6.3.2 Less的两种用法

Less源文件只有被编译成CSS样式单才能被浏览器识别,根据编译Less源文件的时机,Less通常有两种用法。

  1. 预编译:预先使用特定的编译器将Less 源文件编译成CSS 文件,在网页中直接引用CSS文件即可。
  2. 浏览器即时编译:直接在网页中引入Less 源文件,并在网页中导入编译Less 源文件的JS库,从而让浏览器在运行时即时编译Less源文件。

1.预编译方式

使用默认的Grunt遍历Less

先看”预编译”使用Less源文件的方式。如果要预编译Less源文件,就需要使用特定的编译工具。Bootstrap默认使用Grunt作为编译系统,并提供一些便捷的工具方法用于编译整个Bootstrap框架。
使用Grunt之前,必须先安装Grunt,推荐使用Node.js来安装Grunt,因此开发者应该先安装Node.js,安装Node.js时会自动安装npm工具—npm是node packaged modules的简称,它的作用是基于Node.js管理扩展包之间的依赖关系。
提示:在Windows上安装Node.js非常简单,只要登录Node.js官网下载一个node-vx.x.x.msi安装文件,就像安装其他Windows程序一样安装它即可。

Grunt安装步骤

安装Grunt请按如下步骤进行。

  1. 启动命令行窗口,在命令行窗口中输入如下命令来安装grunt-cli:
    1
    npm install -g grunt-cli
  2. 下载并解压Bootstrap的源代码包,在该解压路径下会看到package.json文件。
  3. 进入Bootstrap源代码包的解压路径,在该路径下输入如下命令:
    1
    npm install
    该命令将会读取package.json文件并自动安装此文件中列出的所有被依赖的扩展包。

成功安装Grunt之后,接下来要编译Bootstrap的Less源代码非常简单,直接使用Bootstrap提供的工具方法进行编译即可。下面是Bootstrap提供的工具方法。

  1. grunt dist:重新生成dist/目录,并将编译、压缩后的CSS和JavaScript文件放入这个目录中。大部分时候只要执行该命令即可。
  2. grunt watch:监测Less源文件的改变,并自动重新将其编译为CSS文件。
  3. grunt test:在PhantomJS环境中运行JSHint和QUnit自动化测试用例。

其他Less编译器

如果仅仅只是编译少量的Less源文件,也有一些简便、易用的Less编译工具。

  • WinLess:Windows平台的Less编译软件。
  • Koala:全平台的Less/Sass编译工具。该工具支持Windows、Linux和Mac OS X平台。
  • SimpleLESS:跨平台的Less编译工具。该工具支持Windows和Mac OS X平台

NodeJS中使用lessc命令编译less

打开git-bash,输入乳腺npm命令安装less:

1
npm install -g less

安装成功后进入less文件所在的目录,使用lessc xxx.less xxxx.css命令把less文件编译成css文件,例如:

1
$ lessc var.less var.css

这样就会在同级目录下生成编译好的var.css文件。

VSCode中安装less自动编译插件

在VScode中依次打开查看,扩展,然后在搜索框中输入less进行搜索,然后:

  1. 安装Beautify css/sass/scss/less这个插件,这个插件可以格式化less文件,
  2. 安装Easy LESS这个插件,这个插件可以在保存less文件时自动编译该less文件.这样我们就不用手动去输入指令编译了。

2.即时编译方式

使用即时编译方式,需要额外下载一个编译Less源文件的JS库。登录less的Github仓库即可下载Less.js的源文件压缩包。解压压缩包,我们只需要压缩包dist/目录下的less.min.js文件。
在HTML页面中直接使用link标签引入Less源文件,然后使用script标签引入less.min.js文件即可。

1
2
3
4
<!-- 引入less源文件 -->
<link rel="stylesheet/less" href="sample.less" media="all" />
<!-- 引入less编译器 -->
<script src="../less.min.js"></script>

程序示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title> Less即时编译 </title>
    <!-- 引入less源文件 -->
    <link rel="stylesheet/less" href="sample.less" media="all" />
    <!-- 引入less编译器 -->
    <script src="../less.min.js"></script>
    <style type="text/css">
        div {
            margin-bottom: 20px;
            background-color: rgba(86, 61, 124, .15)
        }
    </style>
</head>

<body>
    <div class="a">
        .a
    </div>
    <div class="b">
        .b
    </div>
    <div class="c">
        .c
    </div>
</body>

</html>

注意:引入less源文件和less的编译器文件如下所示

1
2
3
4
<!-- 引入less源文件 -->
<link rel="stylesheet/less" href="sample.less" media="all" />
<!-- 引入less编译器 -->
<script src="../less.min.js"></script>
  • 第一行代码表明在页面中引入sample.less源文件,其中rel属性值为stylesheet/less,这表明被引入的文件是Less源文件,而不是CSS样式单文件。
  • 第二行代码引入了less.min.js文件,浏览器将会使用该JS文件在运行时即时编译Less文件,生成CSS样式文件。

注意一定要先引入所有Less源文件,然后后才引入less.min.js文件。

由于存在跨域访问的问题,因此需要将上面页面部署在Web服务器(如Tomcat)之后再访问它。

可以看出3个<div>元素的高度关系:第二个<div>高度比第一个<div>高度小5px;第三个<div>高度是第一个<div>高度的2倍。而且从图6.17下方也可以看到浏览器即时编译Less文件并生成CSS文件的提示信息。

总体来说,要想使用即时编译的方式,只要在HTML页面中增加less.min.js文件即可,使用起来简单、方便,但这种方式会在浏览页面时即时编译,因此会产生额外的性能开销。
我们在学习阶段可采用这种方式使用Less源文件,
但在实际项目上线时,还是推荐先将Less源文件编译成CSS文件,然后在HTML页面中直接引用预编译的CSS样式文件。

参考资料

编译less的四种方式以及node.js的安装