好好再整理一下Less知识吧

一、什么是Less
　 css的Less好比是js的Jquery，可以让人们更方遍快捷的使用css，使css代码更简洁，可以减少重复的代码，减少开发人员的工作量。
　　Less CSS是一种动态样式语言，属于CSS预处理语言的一种，它使用类似CSS的语法，为CSS赋予了动态语言的特性，如变量、继承、运算、函数等，更方便CSS的编写和维护。
　　Less中文手册：less.bootcss.com

二、编译工具
　　1.Koala：国人开发的LESS/SASS编译工具
　　　下载地址：http://koala-app.com/index-zh.html
　　2.Node.js库
　　3.浏览器端使用

三、koala配置及使用
　　1.新建后缀为.less文件：index.less
　　　头部写上：@charset “utf-8”; 　　//设定字符集
　　2.把文件夹拖到koala中，设置输出路径为style下的index.css
　　 使用koala进行编译，然后就生成了一个index.css文件。
　　3.之后我们只要编辑index.less文件即可。

四、注释
　　1./编译后会被保留/
　　2.//编译后不会被保留

五、变量
　　1.设定变量：
　　@text_width: 300px;
　　2.使用变量：示例如下
　　

　　.box{
　　　　width: @text_width;
　　　　height: @text_width;
　　　　background: #000;
　　}

六、混合
　　1.混合简介：与原有的在class中新追加class的方法有所不同（原有

），使用Less的混合功能后，只要声明.border后，在.box中加　　入.border;即可。
　　使用示例一：
　　

　　.box{
　　　　width: @text_width;
　　　　height: @text_width;
　　　　background: #000;
　　　　.border;
　　}
　　.border{
　　　　border: 5px solid yellow;
　　}
　　使用示例二：新增一个box2，但是它和box1只有一点点细微的区别，可以直接拿来box1使用，然后加上它自己的样式。
　　.box2{
　　　　.box1;
　　　　margin-left: 100px;
　　}
　　2.混合是可以带参数的
　　在index.less中使用带参数的值，在border_02后面加一个（），里面声明一个变量；
　　然后传入参数30px。
　　
[图片]
　　在编译后的index.css文件中，带参数的变量不显示
　　
[图片]
　　3.混合也可以带默认值
　　在border_03后面加一个（），里面声明一个变量，变量后面附一个初始值“:10px”；
　　如果不想用默认值，只要在text_hunhe下的border_03的()中写入值即可。
　　默认值必须带（），不然会报错。
　　
[图片]
　　4.混合高级使用示例，兼容性也可以使用
　　

　　
[图片]
　　在编译后的index.css文件中，展示如下
　　
[图片]

七、匹配模式
　　1.简介：相当于js中的if，但不完全是
　　2.示例
　　先介绍一个画倒三角的方法
　　

　　.sanjiao{
　　　　width: 0;
　　　　height: 0;
　　　　overflow: hidden;
　　　　border-width: 10px;
　　　　border-color: red transparent transparent transparent;
　　　　border-style: solid dashed dashed dashed;
　　}
　　匹配模式示例一：
　　.triangle(top,@w:5px,@c:#ccc){
　　　　border-width: @w;
　　　　border-color: @c transparent transparent transparent;
　　　　border-style: solid dashed dashed dashed;
　　}
　　.triangle(right,@w:5px,@c:#ccc){
　　　　border-width: @w;
　　　　border-color: transparent @c transparent transparent;
　　　　border-style: dashed solid dashed dashed;
　　}
　　.triangle(bottom,@w:5px,@c:#ccc){
　　　　border-width: @w;
　　　　border-color: transparent transparent @c transparent;
　　　　border-style: dashed dashed solid dashed;
　　}
　　.triangle(left,@w:5px,@c:#ccc){
　　　　border-width: @w;
　　　　border-color: transparent transparent transparent @c;
　　　　border-style: dashed dashed dashed solid;
　　}
　　.triangle(@ ,@w:5px,@c:#ccc){　　　　// @ 是固定格式，表示不管你匹配到谁，都会带上这些内容
　　　　width: 0;
　　　　height: 0;
　　　　overflow: hidden;
　　}
　　.sanjiao{
　　　　.triangle(right,100px);
　　}
　　匹配模式示例二：
　　匹配模式定位
　　.pos(r){position:relative;}
　　.pos(a){position:absolute;}
　　.pos(f){position:fixed;}
　　.posi{
　　　　width: 100px;
　　　　height: 100px;
　　　　background: blue;
　　　　.pos(r);
　　}

八、运算
　　1.less中的运算可以是任何数字、颜色、变量，运算要包裹在括号中。如：+ - * /
　　2.示例如下：
　　@test_01:300px;
　　.box_02{
　　　　width: (@test_01 - 20) * 5; 　　//未强制规定必须要带px单位，只要有一个带即可
　　　　color: #ccc - 10; //不太常用到
　　}

九、嵌套规则
　　1.示例
　　
[图片]
　
　　原css　
　　.list{}
　　.list li{}
　　.list a{}
　　.list span{}
　　使用Less嵌套：
　　.list{
　　　　width: 600px;
　　　　margin: 30px auto;
　　　　padding: 0;
　　　　list-style: none;
　　　　font-size: 16px;　　　　li{
　　　　　　height: 30px;
　　　　　　line-height: 30px;
　　　　　　background: blue;
　　　　　　margin-bottom: 5px;
　　　　　　padding: 0 10px;
　　　　}
　　　　a{
　　　　　　float: left;
　　　　　　color: #000;
　　　　　　&:hover{　　　　//&代表上一层选择器
　　　　　　　　color: red;
　　　　　　}
　　　　}
　　　　span{
　　　　　　float: right;
　　　　}
　　}

十、arguments变量
　　.border_arg(@w:30px,@c:#ccc,@xx:solid){border:@arguments} //省了一点点事儿，懒人必备
　　.test_arguments{.border_arg(40px);}

十一、避免编译、!important
　　1.避免编译：在我们需要输入一些不正确的css语法或者使用一些less不认识的专有语法时使用。在字符串前加上一个~即可
　　.test_03{
　　　　width: ~’calc(300px - 30px)’; //~’…’避免编译，把单引号里的内容按照原样传给浏览器
　　}
　　2.!important关键字：适合用来调试，一般不会用到
　　.test_important{
　　　　.box !important;　　　　//给所有样式加上!important
　　}

十二、定义全局设置：
在less.js引入前加入一段js语句定义less全局编译设置

less = { env: "development", // or "production" async: false, // load imports async fileAsync: false, // load imports async when in a page under // a file protocol poll: 1000, // when in watch mode, time in ms between polls functions: {}, // user functions, keyed by name dumpLineNumbers: "comments", // or "mediaQuery" or "all" relativeUrls: false,// whether to adjust url's to be relative // if false, url's are already relative to the // entry less file rootpath: ":/a.com/"// a path to add on to the start of every url //resource };

十三、
定义变量：
@color:red;
Body{background-color:@color};
定义的变量应用没有前后顺序要求，为了阅读方便，最好能将变量定义在应用该变量的地方前面

十四、

定义函数：
官方文档上称之为类，我觉得更像一个函数定义的方式
.default(@color){
background-color:@color;
border:1px solid @color;
}
这样就定义了一个函数default，前面的.必须加上，使用这个函数就直接在要使用这个样式的元素后调用就可以
.con1{default(red)};
这样就给class为con1的元素使用了函数default定义的一组样式，background-color和border的颜色为红色

函数的参数可以设定一个默认值，调用的时候不传值，就使用默认值
.default(@color：red){
background-color:@color;
border:1px solid @color;
}

还可以定义一个变量，然后在函数定义的时候直接传变量
@re:red;
@ye:yellow;

.con1{default(@ye)};
.con2{default(@re)};

函数体内定义的变量作用域也只是函数体内，
@yu:pink;
@col:yellow;
.default(@color){
@yu:red;
background-color:@color;
border:1px solid @yu;
}
.default2(@color){
@yu:yellow;
background-color:@color;
border:1px solid @yu;
}

.con1{.default(@col)};
.con2{.default2(@yu)};

还可以使用@arguments来引用所有传入的变量
.border(@a,@b,@color:blue){
border:@arguments;
}

.con2{.border(1px,solid)}
输出为：.con2{1px solid blue}

还可以使用参数的控制位来控制相同的类输出不同的样式
.border(cool,@color){
border:2px solid @color;
}
.border(hot,@color){
border:1px solid @color
}
.border(@_,@ye){
color:@ye;
}

调用：
.con2{.border(hot,red)}
.con1{.border(cool,blue)}
输出为：.con2(border:1px solid red;color:red)
.con1{border:2px solid blue;color:blue}

或者使用参数个数来控制输出那个类：
.border(@a){….}
.border(@a,@b){…}
如果传入一个参数则调用第一个定义，传入2个则调用第二个定义

十五、

层级嵌套定义：
比如class为con1的div下的ul下的li项中的a链接hover的color为red,不加下划线
div.con1{
ul{
li{
a{text-decoration: none;
&:hover{color:red};
}
}
}
}

十六、
条件语句判断：
可以在类函数定义时候使用条件判断
.border(@a) when (@a>10),(@a<3){
border:@a solid blue;
}
.con1{.border(5px)}
这里的条件是大于10或者小于3，所以调用不成立

.border(@a) when (@a>10) and (@a<15){
border:@a solid blue;
}
.con1{.border(12px)}
这里的条件是大于10并且小于15 ，调用成立，条件语句中那个px可以加也可以不加，判断都通过

还可以使用内置函数unit来增加或者取出单位
.border(@a) {
border:unit(@a,px) solid red;
}
.con2{.border(5)}
输出 .con2{border:5px solid red;},如果写成unit(5px) 则去掉单位输出5

&可以用于代表父选择器
p { font-size: 12px;
a { text-decoration: none;
&:hover { border-width: 1px }
}
代表了：
p {
font-size: 12px;
}
p a {
text-decoration: none;
}
p a:hover {
border-width: 1px;
}

十七、
LESS内置函数：
除了上面介绍的unit外
ceil(@number); // 向上取整
floor(@number); // 向下取整
percentage(@number); // 将浮点数转换为百分比，例如 0.5 -> 50%
round(number, [places: 0]); // 四舍五入取整
saturate(@color, 10%); // 饱和度增加 10%
desaturate(@color, 10%); // 饱和度降低 10%
lighten(@color, 10%); // 亮度增加 10%
darken(@color, 10%); // 亮度降低 10%
fadein(@color, 10%); // 透明度增加 10%
fadeout(@color, 10%); // 透明度降低 10%