乐趣区

关于less:Less的安装

jiezi

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;}

在浏览器中的演示成果：

退出移动版