less的安装与使用

1、首先第一步我们来安装less,要安装less首先要装有node.js，node.js可以上官网下载安装，详细安装后面我会介绍

在有node.js的情况下安装很简洁，打开cmd运行：

npm install -g less

如下所示安装成功

2、接下来我们使用它来编译我们本地的一个less文件。让它生成css文件。

首先创建一个css 样式

如下创建一个less文件，然后保存它

.myless {

  overflow-x: hidden;

  span {

    display: block;

    text-align: center;

    padding: 5px 0 2px 0;

    font-size: 16px;

  }

3、开始编译less文件，cd到该目录，如下图所示，找到我们保存的style.less文件

4、开始编译该文件，直接运行

lessc styles.less

结果报错，错误如下图所示：

ParseError: Unrecognised input. Possibly missing something in E:\software\styles.less on line 8, column 4:

7     font-size: 16px;

8   }

他告诉我们 文件缺少个｝,从这里可以看出less编译可以帮我们查找错误，用它我们可以检查样式书写错误。

5、修改以上错误，在less文件中加｝,然后我们再运行编译它

lessc styles.less

此时我们发现编译成功了，编译成功后输出样式，如下所示：

6、我们到我们刚才style.less存储的路径下查找，并没有style.css文件。要把它保存到本地某个css文件，我们运行：

lessc styles.less mystyles.css

这样我们本地将得到 一个mystyles.css文件

7、检查得到的mystyles.css文件

如下图一，说明文件存在，

为了保证是我们编译的那个文件我们打开这个css文件：

.myless {  overflow-x: hidden;}.myless span {  display: block;  text-align: center;  padding: 5px 0 2px 0;  font-size: 16px;}

如下图2所示，发现确实是我们要得到的样式，到此编译成功