前端开发

Less 安装

2020-11-06 15:46:24 阅读数 2165 收藏 0

本节我们学习 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;
}

在浏览器中的演示效果: