less笔记-Less安装与基础使用

布满荆棘的人生 2022-09-25 13:21 229阅读 0赞

一、安装Less

npm为Node.js的包管理器，通过npm可简易的安装Less。

Node.js下载地址：https://nodejs.org/en/

下载的Node.js为msi文件，双击安装，选择安装npm即可。之后通过cmd进入安装目录（node.exe所在目录），使用npm命令即可安装less：

方法一：使用命令

npm install -g less

![Center][]

说明：可看到此命令安装的less路径为：C:\\Users\\Administrator\\AppData\\Roaming\\npm\\node\_modules\\less

该方法不需人为添加环境变量，命令中的g即代表global，全局可用的意思。安装后，即可在cmd窗口使用lessc进行.less文件的编译。

方法二：使用命令

npm install -d less

![Center 1][]

![Center 2][]

说明：此方法的好处在于安装的less就在node.js安装目录的node\_modules文件夹下，此外该文件夹下还有.bin与npm两个文件夹。同样将less文件夹下的bin文件夹添加进环境变量即可。

二、less基础使用

方法一：

使用lessc编译，该方法将用到上面安装的less语言，一般用于服务器端。

步骤：1、将less的bin添加进环境变量后，进入编辑好的.less文件所在目录。（less语法：*http://www.runoob.com/manual/lessguide/features/\#extend-feature-extend-syntax*）

![Center 3][]

2、打开cmd，进入该.less文件目录，使用lessc进行编译。

![Center 4][]

3、查看.less所在目录，发现生成了相应的CSS文件。

![Center 5][]

方法二：

通过在html中引用less.js，即在浏览器端使用less。没找到less.js包，有的资源说是下载less.js包，其实也只是less语言的免安装版，所以该方法暂时没用过。

Less免安装版地址：

*https://github.com/less/less.js/releases/tag/v2.5.1*

*参考博客：http://www.cnblogs.com/shaomenghao/p/3984737.html*

[Center]: /images/20220717/17feaa0dd7cd432099c3a9119982647e.png
[Center 1]: /images/20220717/f9738dff58574f7c8ddc45a4827f2aa8.png
[Center 2]: /images/20220717/0d4d9e47ea744e7a912ad948f28f415e.png
[Center 3]: /images/20220717/245169e4ea7e41028a32534f80e53cb7.png
[Center 4]: /images/20220717/39dcb9c6a7264400bf64e030e408bce1.png
[Center 5]: /images/20220717/64ca8f2346ac482886eacc25b66daa56.png