初学less

（0）.前言

　　0.安装：npm install -g less

　　1.kaola编译less

（1）具体写法与使用

　　1.注释

　　　　//包裹的注释不会被编译到css文件中

　　　　/**/包裹的注释会被编译到css文件中

　　2.变量：可以使用@去定义变量

　　　　属性值：@color：pink     ---->    backgraund-color:@color    //复用

　　　　属性名：@m：margin    ---->      @{m} :0

　　　　选择器：@selector：input   ----->   @{selector}{ ... }      //后两种不提倡

　　  变量的延迟加载：会等某个作用的所有变量都声明完成后才会去赋值。

　　3.嵌套规则

　　　　普通嵌套：写在内部即可

　　　　hover等嵌套：需要在写:hover前加一个&

　　4.混合

　　　　普通混合：当两个选择器(b,c)内容相同时，可以将混合器内容单独拎出去，定义在一个选择器a中，在原本需要写内容的地方引入该选择器即可，示例简略版如下

　　　　　　.a{ .. .}      b{.a}   c{.a}  【这样转化时a也会被当做选择器转化为css】

　　　　不带输出的混合：.a{ .. .}         ===>     .a(){ .. .} 即可      b{.a} ===>  b{.a()}

　　　　带参数的混合：.a(@args...){ .. .}

　　　　带默认值的混合：.a(@args:【值】,@name:【值】 ...){ .. .}

　　　　指定传参对象的混合：  b{.a(@name:123px)}     可以指定压迫传给谁

　　　　匹配模式：当定义的选择器a要被书写多次（功能大致相同，代码结构不同，例如调整margin的四个值，就需要写四个相同的a来应对不同方向的需求）

　　　　　　　　　此时可以将多个a中的内容相同的内容提取出来，当做这些选择器的共同，且在调用时不用调用共同部分。

　　　　　　写法：.a(@_){【公共部分】}   .a(@args...){ ..【非公共部分】 .}

　　　　arguments：可以对实参进行接收，用的不多

　　　　　　写法：  .border(1px,solid,black)         .border(@1,@2,@3){  border: @arguments;}

　　5.计算

　　　　可以用（）包裹要计算的对象，但要求计算的对象的一方携带单位

　　6.继承

　　　　.a{ .. .}     .b{ &:extend(.a all)}        //all的意思是，所有的a都会被继承，包括a:hover等

　　7.避免编译

　　　　对不需要编译的内容  ~"【不需要编译的内容】"