2.1变量
2.1.1 变量语法
使用@来定义变量，变量名自定义。
@color: #00f;
此时定义了一个变量color其值为十六进制颜色值
使用变量的时候需要加上@，表示取出color变量的值。
使用变量：
h1 {
color: @color;
}
2.1.2 变量的作用域
可以定义多个变量，但是当多个变量同名的时候，应该使用哪个变量的值呢？less和其他语言类似，采用就近原则，也即如果当前作用域下有该变量则使用该变量的值，否则逐层作用域向上查找，直到查找失败，解析错误，如果配置了File Wather控制台会报错，并指向出错的less文件位置：
比如：
@color:#00f;
div {
@color: #f00;
color: @color;
}
此时可以看到，color使用的是最近一级的@color变量的值
特别的是，查看以下代码：
@color:#00f;
div {
@color: #f00;
.my {
@color: #ff0;
background-color: @color;
@color: #0f0;
}
}
如果同一作用域下，使用该变量的位置比变量定义位置靠前，那么该使用哪个变量的值呢？由于less对变量的处理是先对变量统一处理，也即按照变量顺序进行处理之后，再对使用其的地方进行赋值操作，因此会使用最后一次定义变量的地方。
也即结果为：
2.1.3 字符串插值
类似于es6的模板字符串一样，可以在字符串中使用变量。
语法：
@variable: "xxx";
将变量放入到{}中
@{variable}
使用：
@url: "/images/";
div {
width: 200px;
height: 200px;
background-image: url("@{url}1.jpg"); // 结果为/images/1.jpg
}
2.1.4 选择器插值
类似于字符串插值一样，将变量放入到{}中。不同的是，选择器插值则是作为对选择器的定义
使用：
@mydiv: div;
@{mydiv} {
width: 200px;
height: 200px;
}
编译之后：
div {
width: 200px;
height: 200px;
}
2.1.5 媒体查询定义变量的方式
由于“~”后面的值是不被编译的，所以可以用作媒体查询的参数。
使用：
@mediaQuery: ~"(max-width: 600px)";
@media screen and @mediaQuery {
div {
width: 200px;
height: 200px;
background-color: #898900;
}
}
2.1.6 变量之间相互使用
-
不加
@如果一个变量直接引用一个变量，而不加
@，则使用该变量的值的时候，需要加上两个@@color: #00f; @mycolor: color; div { color: @@mycolor; }类似于先取出color，然后再对color变量进行值得提取
-
加上
@如果引用得变量加上了
@，表明直接使用得是值，此时和使用普通变量得用法一致@color: #00f; @mycolor: @color; div { color: @mycolor; }
2.2 混合
2.2.1 继承属性
可以在一个选择器内部引用已经定义好的类样式和ID选择器样式(只能是这两个选择器样式)，那么这个选择器就可以直接使用引用的选择器样式属性
使用：
.div {
width: 200px;
height: 200px;
}
span {
.div;
}
// 编译之后的结果：
.div {
width: 200px;
height: 200px;
}
span {
width: 200px;
height: 200px;
}
可以看到引用的样式也同样出现在编译之后的文件中
2.2.2 带参数混合
带参数混合就类似函数一样的性质。
以上继承属性的方式是直接使用继承之后的属性，除此之外，还可以传入参数给继承的类/ID样式，便于动态引用，同时便于扩展
使用：
.div(@width) {
width: @width;
height: @width;
}
span {
.div(20px);// 传参过去，类似于函数
}
// 编译之后的结果
span {
width: 20px;
height: 20px;
}
可以看到引用的样式不会出现在编译之后的文件中
注意：如果继承的样式需要参数，则必须传参过去，否则会出错。
除了传递一个参数过去以外，还可以传递多个参数，多个参数之间使用分号;分隔。
.div(@width;@height) {
width: @width;
height: @height;
}
如果存在选择器一样，参数个数不一致的情况，会出现什么情况呢？
CSS是顺序编译，当找到第一个满足要求的选择器，则进行匹配
比如：
.div(@width) {
width: @width;
height: @width;
}
.div(@width;@height) {
width: @width;
height: @height;
}
span {
.div(200px);
}
// 编译之后的结果为：
span {
width: 200px;
height: 200px;
}
由于第一个匹配成功，则继承第一个样式。
但是如果参数个数一致，选择器名称也一致呢？
只要满足要求，就进行匹配，并继承
比如：
.div(@width) {
width: @width;
}
.div(@height) {
height: @height;
}
span {
.div(200px);
}
// 编译之后的结果为：
span {
width: 200px;
height: 200px;
}
由于以上两个都匹配，所以都会继承
2.2.3 隐藏属性继承
直接继承属性，继承的父样式同样也会出现在编译之后的结果中，而带参数混合的方式继承，继承的父样式不会出现在编译之后的结果中。
有时，只是为了使用继承的公共的样式，而在html页面中不会单独使用公共样式，所以不想让公共样式出现在编译之后的结果中。
所以结合上面两种写法，可以使用隐藏属性继承的方式，既继承了公共样式，又不让其出现在编译之后的结果中。
使用：
.div() {
width: 200px;
height: 200px;
}
span {
.div();
}
// 编译之后的结果 只包含span选择器样式
span {
width: 200px;
height: 200px;
}
注意：()不能省略
2.2.4 默认值混合
可以给参数设置默认值，这样可以使用默认值且不用传参的情况下继承样式
使用：
.div(@width: 100px) {
width: @width;
height: @width;
}
span {
.div; // 也可以是.div();
}
2.2.5 @arguments参数
类似于js中函数中内置对象arguments一样，可以获取传递的全部参数值，less中@arguments也可以获取全部的参数值，但也仅限于获取参数值，不能做其他操作。但是有时不想对单个参数进行操作，只用全部的参数值的时候还是很有用的。
使用：
.transition(@property: all;@duration: 4s;@delayTime: 2s;@TimingFuction: ease) {
-moz-transition: @arguments;
-webkit-transition: @arguments;
-o-transition: @arguments;
transition: @arguments;
}
span {
.transition();
}
// 编译之后的结果
span {
-moz-transition: all 4s 2s ease;
-webkit-transition: all 4s 2s ease;
-o-transition: all 4s 2s ease;
transition: all 4s 2s ease;
}
2.2.6 !important
如果给一个一个属性添加!important会很麻烦，此时可以在引用父级样式的时候加上!important，引用的父级样式中所有属性都会加上!important属性。
使用：
.div(@width;@height) {
width: @width;
height: @height;
}
span {
.div(100px,100px)!important;
}
// 编译之后的结果
span {
width: 100px !important;
height: 100px !important;
}
2.2.7 扩展运算符...
可以使用扩展运算符...来不指明有多少个参数，而参数的获取通过@arguments参数来获取。
使用：
.div(...) {
width: @arguments;
}
span {
.div(100px);
}
// 编译之后的结果为
span {
width: 100px;
}
2.2.8 模式匹配
只有满足匹配要求的混合才会被使用。混合中的变量可以匹配任何值，非变量形式的值只有与传入的值完全相等时才可以匹配成功。
使用：
.border(soild,@size) {
border: @size;
}
.div(@height) {
height: @height;
}
span {
.border(soild,2px);
}
只有传入的值是solid才能与.border类匹配成功，否则匹配不成功。
所以非变量形式的值也即不加@的值，此值只是用于进行继承限定的，不用于传参使用。
2.2.9 条件混合
-
when
只有当when中的条件满足的时候，才会应用该样式
// 当@a的值大于400px的时候，才能使用改样式，等效于when(true)的时候才可以 .minin(@a) when (@a > 400px) { width: @a; } #header { .minin(500px);// 满足要求 } // 编译之后的结果为： #header { width: 500px; // 成功引入 }而如果不满足：
.minin(@a) when (@a > 400px) { width: @a; } #header { .minin(200px); } // 编译之后的结果： 由于不满足条件，所以没有成功引入，也即没有样式如果变量的值为false/true，变量可以单独写在when括号中。
.minin(@b) when (@b) { width:200px; } #header { .minin(false); } -
多个条件
多个条件使用
,进行分隔，且每个条件单独写在一个括号内。只要有一个条件满足，则这个选择器被选中。类似于或运算。.minin(@a,@b) when (@b),(@a<= 200px) { width: @a; } #header { .minin(200px,false); } // 编译之后的结果为： #header { width: 200px; } -
and
多个条件都满足时才被选中
.minin(@a,@b) when (@b)and(@a<= 200px) { width: @a; } #header { .minin(200px,false);// 没有被选中，没有样式输出 } -
not
当条件不满足的时候被选中，取反操作
.minin(@b) when not(@b) { width: 200px; } #header { .minin(false); } // 编译之后的结果为： #header { width: 200px; }not只作用于一个条件，不能作用于多个条件
.minin(@a,@b) when not(@b)and(@a> 200px) { width: @a; } #header { .minin(200px,false); } // 由于not只作用于(@b)条件，而(@a > 200px)不满足条件，所以没有样式输出
2.3 嵌套语法
Less提供了使用嵌套代替层叠或与层叠结合使用的能力。使用Less书写可以模仿HTML的组织结构
假设有以下html结构
<main>
<section>
<div></div>
</section>
</main>
编写类似于html结构的less文件，一层一层嵌套类似于使用结构选择器对元素逐层查找一样，和后代选择器效果一致。且内层嵌套会继承外层选择器属性。
main {
width: 200px;
height: 200px;
section {
width: 100%;
height: 50%;
div {
width: 50%;
height: 50%;
background-color: #0ff;
}
}
}
编译之后的css文件为：
main {
width: 200px;
height: 200px;
}
main section {
width: 100%;
height: 50%;
}
main section div {
width: 50%;
height: 50%;
background-color: #0ff;
}
2.3.1 &的用法
&表示对父选择器的引用，一般用在伪类选择器上。
在一个内层选择器的前面，如果没有 & 符号，则这个内层选择器会被解析为父选择器的后代。如果内层选择器前面有一个 & 符号，则内层选择器会被解析为父选择器自身或父选择器的伪类。
有以下html代码：
<main>
</main>
需要选中当鼠标悬浮时的样式，也即main:hover，
如果是以下写法：
main {
width: 200px;
height: 200px;
main:hover {
background: #000;
}
}
因为嵌套方式是选择后代元素，所以编译之后的结果是：
main {
width: 200px;
height: 200px;
}
main main:hover {
background: #000;
}
显然不是我们想要的结果，我们并不想要作为后代选择器的方式出现，而是兄弟选择器的方式并排出现，所以此时可以使用&
main {
width: 200px;
height: 200px;
&:hover {
background: #000;
}
}
以上代码的解析过程是：当解析到&的时候，&会被选择器替换替换，且与父选择器出现在同一层，也即：
main {
width: 200px;
height: 200px;
}
main:hover {
background: #000;
}
应用：
2.3.1.1 重复引用父选择器
.my {
width: 200px;
height: 200px;
&-one {
background-color: #f00;
}
&-two {
background-color: #00f;
}
&-three {
background-color: #ff0;
}
}
编译之后的结果为：
.my {
width: 200px;
height: 200px;
}
.my-one {
background-color: #f00;
}
.my-two {
background-color: #00f;
}
.my-three {
background-color: #ff0;
}
2.3.1.2 更改选择器的顺序
有些时候可能需要将内层选择器放在父选择器之前，此时我们可以将 & 放在当前选择器后面来完成。
.my {
width: 200px;
height: 200px;
main & {
background-color: #00f;
}
}
编译之后的结果为：
.my {
width: 200px;
height: 200px;
}
main .my {
background-color: #00f;
}
2.4 命名空间
出于组织结构或仅仅是为了提供一些封装的目的，可以对混合进行分组。对一些冲突的变量规范于不同的命名空间中，同时也便于多次重复使用与扩展。
定义一个命名空间，可以使用任何的类/ID选择器，作为命名空间，此时命名空间的性质类似于函数。
.my() {
}
这里定义了一个命名空间.my，加上()，使其在编译之后的文件中不输出。
接着便可以在这个命名空间中书写混合。
.my() {
.a {
width: 20px;
height: 20px;
.b {
width: 200px;
height: 200px;
}
&:hover {
background-color: #0ff;
}
}
}
使用命名空间中的混合。类似于后代选择器一样选择指定的选择器进行使用。
这里使用>表用来选择
.header {
.my>.a;
}
// 结果为：
.header {
width: 20px;
height: 20px;
}
.header .b {
width: 200px;
height: 200px;
}
.header:hover {
background-color: #0ff;
}
以上代码的意思表示：选择命名空间中的.a选择器作为我要引入的样式，所以.a中的样式被全部引入到.header选择器中，感觉就好像.header替代了.a一样。
如果再先下一层引入呢？
.header {
.my>.a>.b;
}
// 结果为：
.header {
width: 200px;
height: 200px;
}
以上代码就很好解释了，选择命名空间中.b选择器作为要引入的样式，所以.b中的样式被全部引入到.header选择器中，感觉就好像.header替代了.b一样。
除了可以使用>表示逐层选择，还可以使用空格
以下代码效果一致：
.header {
.my .a .b;
}
// 结果为：
.header {
width: 200px;
height: 200px;
}
