[TOC] # Less less是一种css 的预处理语言，简化了css的书写，增强了css的功能，赋予css动态语言的特点，是css的升级版 LESS官网：[http://lesscss.org/](http://lesscss.org/) LESS中文网 ： [http://www.lesscss.cn/](http://www.lesscss.cn/) [http://www.lesscss.net/](http://www.lesscss.net/) # 前言 在使用less时，需要借助考拉工具进行编译 ***** **可以在编译成功的css中定位在less文件中的位置**  ***** **输出方式** 默认输出方式是normal,选择compress输出后会对代码内容进行压缩  ## 1.less嵌套格式 当两个标签描述的是同一个标签。同时又不是父子关系 ```css div{ width: 100%; height: 40px; background-color: @base-color; //嵌套的写法 a{ color:blue; &:hover{ color:red; } } } ul{ li{ background: #ccc; &.last{ background-color: pink; } } } ``` **加&符号书写**  ## 2.定义变量 在样式中有多个重复的属性时，可以通过在less中设置变量的形式来减少对同一个属性的书写 使用**@ + 名字**来定义变量，以分号结束。 ``` //变量的定义 @base-color: pink; div{ width: 100%; height: 40px; background-color: @base-color; } button{ width: 60px; height: 30px; background-color: @base-color; } ``` ## 3.变量的使用 ### 3.1加法 可以通过使用加减乘除来操作变量 ``` @w:300px; @color1:green; @color2:red; //制作一个高永远是宽度一半的盒子 div{ //width: @w - 100;//可以 //width: @w - 200px ;//可以 width: @w; height: @w/2; //background-color: @color1 + @color2; //可以 //background-color: @color1 + 15; // 可以 //background-color: @color1 + yellow; // 不可以 } ``` ### 3.2混合（类似于调用函数） ``` .zidingyi (@w,@h,@color:blue){/*没有传入实参，默认的实参值是blue*/ width: @w; height: @h; background: @color; } div{ .zidingyi(200px,250px,#f40) } p{ .zidingyi(150px,200px) } ```