Less

什么是Less？
css的预处理语言，LESS 包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的 CSS 文件。

html中引用

①link引用.less文件 type = “type/less”,引用less.js插件,不建议使用
ess.js 解析less文件动态加载head，异步加载less文件。

 <link rel="stylesheet" href="./less/04-import.less" type="text/less">
<script src="./lib/less/less.js"></script>

②直接引用less.css

语法

1、less中的注释
①/**/会编译在css文件当中
②//不会编译在css中

2、变量
LESS 允许开发者自定义变量，变量可以在全局样式中使用，使得样式修改起来更加简单。

LESS源码：

//这个注释不会编译在css中
/*这个注释：会编译在css文件当中*/
/*1.变量 :①变量规范与js一样 ②@必须是前缀*/
@mainColor:red;
.box{
  color: @mainColor;
}

a:hover{
  background-color: @mainColor;
}

/*2.声明类选择器   {}用于拼接*/
@className:box;
[e-mail]{className}{
  border-color: green;
}

#@{className}{
  font-size: 12px;
}

编译后的CSS：

/*这个注释：会编译在css文件当中*/
/*1.变量 :①变量规范与js一样 ②@必须是前缀*/
.box {
  color: red;
}
a:hover {
  background-color: red;
}
/*2.声明类选择器   {}用于拼接*/
.box {
  border-color: green;
}
#box {
  font-size: 12px;
}

3、Mixin混入
Mixin（混入）特性，它是多重继承的一种实现，在 LESS 中，混入是指在一个 CLASS 中引入另外一个已经定义的 CLASS，就像在当前 CLASS 中增加一个属性一样。
①类混入

②函数混入

③可带参数

4、嵌套
在我们书写标准 CSS 的时候，遇到多层的元素嵌套这种情况时，我们要么采用从外到内的 选择器嵌套定义，要么采用给特定元素加 CLASS 或 ID 的方式#wjs_banner{

5、导入Import

@import "base";//引入其他的less文件
.f_left{float: @right}

6、运算及内置函数
在我们的 CSS 中充斥着大量的数值型的 value，比如 color、padding、margin 等，这些数值之间在某些情况下是有着一定关系的，利用 LESS 来组织这些数值之间的关系参考链接

添加链接描述

运算：

@back:#333;
.test{
	border: 1px solid @back*2
}

内置函数：

desaturate(@color, 10%);// 饱和度降低 10%
lighten(@color, 10%); // 亮度增加 10%
darken(@color, 10%);// 亮度降低 10%
fadein(@color, 10%);// 透明度增加 10%
fade(@color, 10%);// 设定透明度为 10%