Less 安装

本节我们学习 Less 的安装，Less 的官方地址为：<http://lesscss.org/。

在官网首页，有告诉我们 Less 的两种安装方式，如下所示：

• 直接引用

• 通过 NPM 安装

直接引用

我们先来看直接引用，这个很简单，就是直接在 HTML 页面引入创建好的 Less 文件即可。

• 在引入之前，我们需要创建一个 Less 文件，Less 文件的后缀名为 .less，所以我们可以将文件命名为 index.less。

• 然后我们就可以通过 <link> 标签向 HTML 页面中引入 index.less 文件，和引入 CSS 文件类似，但是需要将 rel 属性的值修改为 stylesheet/less：

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

• 然后下载使用官方提供的 CDN 进行脚本引入：

<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.11.1/less.min.js"></script>

或者也可以下载 Less.js 保存到本地，然后再引入：

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

通过 NPM 安装

如果要通过 NPM 来安装，首先我们要确保电脑上已经安装了 Node.js，安装地址：https://nodejs.org/en/download/。

大家可以在命令窗口中输入 node -v 来检查自己的电脑是否安装成功：

如上图所示，出现版本号则表示安装成功，因为版本一直会更新，所以你安装的版本可能比 v12.16.1 版本要新。

接着我们执行下面这个命令来安装 Less，其中 -g 表示全局安装：

$ npm install -g less

安装好后，如图所示：

从图中可以看出，安装的版本为 less@3.11.3 ，一般默认安装是最新版本的 Less。

然后我们也可以通过 -v 命名查看 Less 的版本号，如果出现版本号，则说明安装成功。

安装完成之后，我们就可以在任何地方执行 lessc 命令了。

编译 Less 文件

Less 安装好后，我们就可以通过 lessc 命令来将 Less 文件编译成 CSS 文件啦。

示例：

下面我们做一个简单的测试，例如现在有一个 index.less 的文件，内容如下所示：

.xkd{
   h3{
       color: #F00;
   }
}

我们要将这个 Less 文件编译成 CSS 文件，可以命令窗口执行如下命令：

然后在项目根目录就能看到生成了一个 index.css 文件，内容如下所示：

.xkd h3 {
  color: #F00;
}

在浏览器中的演示效果：