Less

注释

• 以 // 开头的注释，不会被编译到 css 文件中
• 以 / * * / 包裹的注释会被编译到 css 文件中

变量

使用 @ 来声明一个变量：@pink:pink;

• 作为普通属性值直接使用：例：background: @pink;
• 作为选择器和属性名：#@{selector的值}的形式
• 作为URL：@{url}
• 变量的延迟加载：等作用域中的所有东西解析完，再进行变量加载
• 块级作用域

//less
@var: 0;
.class {
@var: 1;
	.brass {
		@var: 2;
		three: @var; // 3
		@var: 3;
	}
	one: @var; // 1
}
//css
.class {
	one: 1;
}

.class .brass {
	three: 3;
}

嵌套规则

• 基本嵌套规则：父子集关系
• & 的使用：平级关系

//css
.class{ }
.class .bro:hover { }

//less
.class{
	.bro { }
	&:hover { } 
}

混合

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

• 普通混合：混合会编译到 css 文件中
• 不带输出的混合：.class():{}，该混合不会编译到 css 文件中
• 带参数的混合：.class(@w, @h, @c):{}
• 带参数且有默认值的混合：.class(@w: 10px, @h: 10px, @c: pink):{}
• 带多个参数的混合
• 命名参数：.class(@h: 10px, @c: pink):{}
• 匹配模式

//在调用同名混合时，参数为 @_ 的混合会自动被调用
.triangle(@_, @w, @c){
    width: 0px;
    height: 0px;
    overflow: hidden; 
}

.triangle(L,@w,@c){
    border-width: @w;
    border-style:dashed solid dashed dashed;
    border-color:transparent @c transparent transparent ;
}

• arguments 变量

计算

• 加减乘除，一方带单位即可

继承

• 性能比混合高
• 灵活度比混合低

//less
.class {
	position: absolute;
	left: 0;
	right: 0;
	top: 0
	bottom: 0;
	margin: auto;
}

#wrap {
	position: relative;
	.inner {
		&:extend(.class);
		&:nth-child(1) {}
		&:nth-child(2) {}
	}
}

//css
.class,
#wrap .inner,
#wrap .inner:nth-child(1),
#wrap .inner:nth-child(2) {
	position: absolute;
	left: 0;
	right: 0;
	top: 0
	bottom: 0;
	margin: auto;
}
#wrap {
	position: relative;
}
.inner:nth-child(1) {}
.inner:nth-child(2) {}

• all：将继承所有的状态

//less
.class {
	position: absolute;
	left: 0;
	right: 0;
	top: 0
	bottom: 0;
	margin: auto;
}
.class:hover {}

#wrap {
	position: relative;
	.inner {
		&:extend(.class all);
		&:nth-child(1) {}
		&:nth-child(2) {}
	}
}

//css
.class,
#wrap .inner,
#wrap .inner:nth-child(1),
#wrap .inner:nth-child(2) {
	position: absolute;
	left: 0;
	right: 0;
	top: 0
	bottom: 0;
	margin: auto;
}

.class:hover,
#wrap .inner:hover {}

#wrap {
	position: relative;
}
.inner:nth-child(1) {}
.inner:nth-child(2) {}

避免编译

• ~" "：避免编译，留给浏览器进行计算

.class {
	padding: ~"cal(100px + 100)";
}