less 使用指南

版权声明：转载
本文原链接：https://blog.csdn.net/Hierarch_Lee/article/details/79003787

less 的简介
Less 是一门 CSS 预处理语言。

Less 是一种由Alexis Sellier设计的动态层叠样式表语言，受Sass所影响，同时也影响了Sass的新语法：SCSS。

LESS是开源的，其第一个版本由Ruby写成，但在后续的版本当中，Ruby逐渐被替换为JavaScript。受益于JavaScript，LESS可以在客户端上运行（IE6+、Webkit、Firefox），也可以在服务端运行（Node.js、Rhino）。

在语法方面，LESS与CSS较为接近，一个合法的CSS代码段本身也是一段合法的LESS代码段。LESS提供变量、嵌套、混合（mixin）、操作符、函数等一般编程所需的抽象机制

Node -> npm 编译

安装 nodeJS

nodeJS 默认安装在 /usr/local/lib/node_modules 下

nodeJS 默认自带 npm，无需再安装 npm

npm 路径为 /usr/local/lib/node_modules/npm

通过 $ node -v 可查看node版本

通过 $ nom -v 可查看npm版本

安装less
为了将less包安装在nodeJS的node_modules目录下，可以先进入该目录之后再执行如下命令。

全局安装
$ npm install -g less

如果要安装指定版本的less，可在 @ 后面加上版本号：
$ npm install -g less @2.7.2

编译 less 文件，首先你应该输入以下指令测试less编译指令是否可用
$ less -v

如果在命令输入后，下方出现的Less的版本号，那证明Less的这个lessc命令是可用的。

我们来新建一个项目，项目目录如下所示：

|--proj
|  |--public
|     |--styles
|        |--less
|           |--test.less
|        |--css
|     |--imgs
|     |--scripts
|     |--plugin
|     |--index.html

我们现在要编译less文件夹下的 tess.less 文件，编译时需先定位到项目中的less文件目录，然后使用如下命令进行编译，这样就可以将 test.less 文件编译成 test.css 文件了。

$ lessc test.less test.css

还有一种情况就是需要将.less文件和.css文件存放不同目录，如刚演示的项目目录，.less 文件位于styles/less/ 目录下，我们需要将编译后得到的.css文件放在 styles/css 目录下时，可以这样处理，首先定位到项目的styles目录，然后执行如下指令即可：

$ lessc less/test.less css/test.css

这和我们平时访问文件夹的相对路径是一样的。

首先你需要安装压缩插件

注意：安装路径需放置在less目录下（ /usr/local/lib/node_modules/less ）

$ npm install -g less-plugin-clean-css

然后在编译的时候添加 -clean-css 即可，如下嗾使：

$ lessc test.less  test.min.css -clean-css

这样，你的less文件就被编译成压缩后的css文件了。