1 less的安装与使用

通过npm安装，npm i less -g

1.1 lessc命令编译使用

less语法浏览器无法识别，所以需要编译成css语法，可使用命令 lessc styles.less styles.css

该命令可生成css文件，然后在html文件中引入这个css文件即可。

1.2 浏览器端使用

如果每次都需要编译之后才使用，这会显得很繁琐，我们希望的是直接引入这个less文件，但由于浏览器不识别，所以我们还需要额外引入一个less.js文件来识别解析这个less文件，less.js文件的作用就是将less语法编译成浏览器可以识别的css。

使用less.js需要注意，引入less文件的link标签的type属性必须设置成text/less，不然默认是css文件，less.js将不会对它进行解析。

less.watch()则会实时监测less文件的变化，进行实时的编译，而不需要每次改动less文件，都要手动刷新浏览器。

注：less.js 不能通过file://xxxx 运行，即不能直接用浏览器打开，必须运行在服务器上。

2 less的五大核心语法

传统的css语法比较混乱，没有逻辑，比如一个网站主题色在多处使用，却没有办法保存为一个变量，如果修改需要多处修改，类似种种情况很多，所以诞生了相比较于css更加有逻辑性的less，less的学习成本较低，因为所有的样式语法依旧是css语法，只是变得更有逻辑和组织性，主要包括如下语法：

2.1 变量

新建一个less文件：

@color: gold;

@className: box;

.@{className} {

background: @color;

}

less声明变量的方式，@color: gold; (注意：分号不能省略)。

对比js的变量声明，var color = ‘gold’，@就相当于var，: 就想当于=

不同于js的是，使用变量时记得要带@符号，注意第三行的 .@{className}，如果变量需要与其他符号进行拼接，则需要在@和变量名之间加上{}符号。

接下来新建一个html文件：

less--变量

最后分别使用上文中说过的两种less使用方式进行使用，下文我们主要使用第二种方式，但是建议未接触过less的小伙伴在这里两种都尝试一下。

如果你看到less中的样式生效了，则第一个less文件已经成功完成。(别忘了给div设置高度或者有文字，否则div高度默认0，看不到效果)

下文将主要侧重于less的语法介绍，对于html内容以及引用less文件进行效果的测试将不再赘述，建议使用同一个html文件，方便后文一个语法的介绍和测试效果。

2.2 Mixin混入

2.2.1 类混入

新建一个less文件：

.w50 {

width: 50%;

}

.f-left {

float: left;

}

.w50-left {

.w50();

.f-left();

}

像这样通过类名()的方式，可以直接引入该类对应的样式，上图中.w50-left同时拥有.w50和.f-left的样式。

2.2.2 函数混入

新建一个less文件：

.w50 {

width: 50%;

}

.f-direction (@direction: left) {

float: @direction;

}

.w50-right {

.w50();

.f-direction(right);

}

像f-direction的声明方式就是函数的定义方式，括号中相当于js函数的形参，：left是默认值的意思，默认值也可以没有。

调用的时候，可以进行函数的传参。

2.3 嵌套

新建一个less文件：

.box2 {

p {

text-align: center;

&:hover {

background: yellow;

cursor: pointer;

}

}

}

嵌套是后代元素的意思，上图代码所示，意为

less--嵌套

嵌套注意的点是，因为默认是后代元素，所以类似:hover这样需要拼接的，需要在前面加上&符号。

2.4 内置函数

less提供了很多的内置函数，本文无法一一举例说明，只示意一下内置函数的使用方式。

新建一个less文件：

@num: 2;

.nzhs {

width: 100% / @num;

color: red+yellow+blue;

background: gray*0.3;

border: 3px solid lighten(red, 20%); // 比红色亮20%

}

less支持加减乘除的运算，比如上图的width，而颜色的计算指的是颜色的叠加，可使用ps观察各种颜色叠加之后的颜色。

lighten是其中一个内置函数，内置函数还有很多，可查阅less官方文档，不建议所有的都去翻看一遍，使用到的时候再去查阅，用多了自然就记住了。

2.5 import

如果上文每一个语法你都新建了一个less文件，那么此时你的html文件应该引入了多个less文件，类似下图：

接下来新建一个less文件：

@import "./1.less";

@import "./2";

@import "3";

@import "4";

注意：后缀.less可以省略。

然后，我们将html中之前引入的那几个less文件全部删除，只引入我们最后新建的这个less文件，如果之前的效果现在还在，则import成功。

由此，import的功能就是导入其他less文件，需要注意的是，和node中require的概念不同，如果1.less中定义的变量，2中也可以直接使用。