less从入门到掌握

less作为css的增强器被广泛使用在多个框架中，虽然less编译后还是css，但他能让css变得简单便利。同样的还有stylus，sass。或许今后这两个也会被单独拿出来写一篇整理文章。

less的注释

• 注释会显示在编译后的css文件中：/**/
• 注释不会显示在编译后的css文件中：//

less的变量

使用@定义变量：@primary-color: pink; @m: margin; @selector: .name

• 可以作为属性的值使用
• 作为选择器和属性名：@{selector} @{m}: 0
• 作为url：@{url}
• 有延迟加载的特性
• 有块级作用域

less的嵌套

• 基本嵌套规则

ul{
	li{
		font-size: 12px;
	}
}

• &的使用：&指代嵌套中的父标签（如果不加会变成：a :hover）

a{
	&:hover{
		background-color: black;
	}
}

less的混合

混合就是将一系列属性从一个规则集引入到另一个规则集的方式

1. 普通混合（重复代码提取）

.params{
	width: 200px;
	height: 200px;	
}
.inner1{
	.params;
}
.inner2{
	.params;
}

2. 不带输出的混合
   同上代码，在.params后加()，使其不会显示在编译后的css中
3. 带参数的混合（不是函数是mixin）

.params(@w, @h){
	width: @w;
	height: @h;	
}
.inner1{
	.params(200px, 200px);
}

4. 带参数并且有默认值的混合，当实参与形参数量不符可以用命名参数的方式

.params(@w:200px, @h:200px){
	width: @w;
	height: @h;	
}
.inner1{
	.params(@h:100px);
}

5. 匹配模式
   用css的边框画上三角

.triangle{
	width: 0;
	height: 0;
	border-width: 40px;
	border-style: solid;
	border-color: transparent transparent red transparent;
	// 解决IE6bug的神奇代码，开启haslayout
	overflow: hidden;
}

使用less的匹配模式

// 如果第一个参数为@_，则调用同名混合时会一起调用
.triangle(@_){
	width: 0;
	height: 0;
	border-style: solid;
}
.triangle(T, @w, @c){
	border-width: @w;
	border-color: transparent transparent @c transparent;
}
.triangle(B, @w, @c){
	border-width: @w;
	border-color: @c transparent transparent transparent;
}
.wrap{
	.triangle(T, 40px, red)
}

6. arguments变量（实参列表）

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

less的继承

.border(){
	border: 1px solid black;
}
#wrap{
	.inner:extend(.border){
		// &:extend(.border);
		&:nth-children(1){
			width: 250px;
			height: 250px;
		}
	}
}

上面代码编译成css后变成

.border,
#wrap .inner,
#wrap .inner:nth-children(1){
	border: 1px solid black;
}
#wrap .inner:nth-children(1){
	width: 250px;
	height: 250px;
}

如果less写成 .inner:extend(border){…}，则inner及其子元素都会继承.border的样式规则
如果less写成.inner里面有&:extend(.border)，则inner会继承border的样式规则