less

一、Less Css定义：

Less Css是一种动态样式语言，属于css预处理语言的一种，它类似css的语法，为css丰富了动态语言的特性，如变量、继承、运算、函数，更方便css的编写的维护。

Less Css可以在多种语言、环境中使用，包括浏览器端、桌面客户端、服务器端。

二、编译工具：

koala编译：可以开发LESS\SASS的编译工具

下载地址：http://koala-app.com/index-zh.html

Node.js库

浏览器端使用

三、注释方式：

（1）会被编译到css文件中：/注释内容/

（2）不会被编译到css文件中：/注释内容/

四、变量

声明变量语法：@变量名：值

@width: 10px;
@height: @width + 10px;

#header {
  width: @width;
  height: @height;
}

编译为css文件：

#header {
  width: 10px;
  height: 20px;
}

五、混合（Mixins）

@test_width:300px;
.box{
	width:@test_width;
	height:@test_width;
	background-color：yellow;
	.border;//混合
}
.border{
	border:solid 5px pink;
}
.box2{
	.box;
	margin-left:10px;
}
//混合可以带参数
.border2(@border_width){
	border:solid yellow @border_width;
}
.test_border2{
	.border2(30px);
}
//混合-默认值
.border3(@border_width:10px){
	border:solid green @border_width;
}
.test_border3{
	.border3();//不传参就是用默认值，传参了就使用参数。
}

注意：用单纯的css做混合的不用带()，但如果是有参数或默认值时一定要带括号。
混合的应用：css3属性兼容合并重复代码

.border_radius(@radius:5px){
	-webkit-border-radius:@radius;
	-moz-border-radius:@radius;
	border-radius:@radius;	
}
.radius_test{
	width:100px;
	height:40px;
	background-color:green;
	.border_radius(3px);//传参就不用默认值
}

六、嵌套（Nesting）

两种用法：
（1）&对伪类的使用（如hover或focus）
（2）对连接的使用

#header {
  color: black;
  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
  }
}

&代表父级选择器

.clearfix {
  display: block;
  zoom: 1;

  &:after {
    content: " ";
    display: block;
    font-size: 0;
    height: 0;
    clear: both;
    visibility: hidden;
  }
}

七、匹配模式

相当于js中的if，但不完全是，满足条件后才能匹配。
匹配模式案例：
（1）写三角形

/* 头向上 */
//第一个参数是条件top/bottom/left/right
	.triangle(top,@w:5px,@c:#ccc){
		border-width: @w;
		border-color: transparent transparent @c transparent;
		border-style: dashed dashed solid dashed;/*兼容ie*/
	}
	/* 头向下 */
	.triangle(bottom,@w:5px,@c:#ccc){
		border-width: @w;
		border-color: @c transparent transparent transparent;
		border-style: solid dashed dashed dashed;/*兼容ie*/
	}
	/* 头向左 */
	.triangle(left,@w:5px,@c:#ccc){
		border-width: @w;
		border-color: transparent @c transparent transparent;
		border-style: dashed solid dashed dashed;/*兼容ie*/
	}
	/* 头向右 */
	.triangle(top,@w:5px,@c:#ccc){
		border-width: @w;
		border-color: transparent transparent transparent @c;
		border-style: dashed dashed dashed solid;/*兼容ie*/
	}
	//第一个参数@_是表示通用样式
	.triangle(@_,@w:5px,@c:#ccc){
		width: 0;
		height: 0;
		overflow: hidden;
	}
	.sanjiao{
		.triangle(top,3px);
	}

（2）写定位

.pos(r){
	position:relative;
},
.pos(a){
	position:absolute;
}
.pos(f){
	position:fixed;
}
.box{
	width;200px;
	height:300px;
	background-color:pink;
	.pos(a);//匹配使用绝对定位
}

八、运算

算术运算+，-，*，/都可以
运算符前后一定要加空格

@width:500px;
@test{
	width:(@width - 20) * 5;
	color:#ccc - 10;
}

为了与 CSS 保持兼容，calc() 并不对数学表达式进行计算，而在嵌套函数中会计算变量和数学公式的值。

@var: 50vh/2;
width: calc(50% + (@var - 20px));  // result is calc(50% + (25vh - 20px))

九、arguments变量

@arguments包含了所有传递进来的参数。
如果你不想单纯的处理每一个参数的话就可以像这样写

.border_arg(@w:30px,@c:red,@s:solid){
	border:@arguments;
}
.test{
	.border_arg(40px);
}

十、避免编译

有时候我们需要输出一些不正确的CSS语法或使用一些LESS不认识的专有语法。
要输出这样的值我们可以在字符串嵌加一个~
例如：width:~‘calc(100% - 35)’
！important关键字：
会为所有混合所带来的样式，添上!important

.test_important{
	.border_radius()!important;
}