【记录】Less

Less

leaner Style Sheet
Less 诞生于 2009 年，受Sass的影响创建的一个开源项目。 它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充。

---

css不能套娃，只能一个item一块。less和sass可以套娃，且自动生成对应的css文件。

【注释】

// 单行注释，不会被解析到css文件中。
/* 多行注释，会被解析到css文件中。 */

【变量】

// @变量名: 变量值;
@a: 100px;
.box{
	width: @a;
}

// @类名: 类;
@c: box;
.@{c}{
	width: @a;
	background-image: url("@{c}/1.png");
}

.box{
	color: #bfa;
	background-color: $color; 
	// 和color相同
}

【选择器】

// 子元素选择器 >
.box1 {
	>.box3{
		...
	}
}

// 外层父元素/this &
.box1{
	&:hover{
		...
	}
}

// 类选择器，不会解析到css中
.box2(){
	...
}
.box1{
	.box2;
}

【继承】

.p1{
	width: 100px;
	height: 200px;
}
.p2:extend(.p1){
	color: red;
}
.p3{
	.p1();
}

【混合函数】

.box(@w, @h, @c){
	width: @w;
	height: @h;
	border: 1px solid @c;
}
div{
	//按顺序
	.box(100px, 200px, red);
	//或者 乱序
	.box(@c:red, @h:200px, @w:100px);
}

// 设置默认值，传参时候可以不传参数表示使用默认值。
.box(@w:100px, @h:200px, @c:red){
	width: @w;
	height: @h;
	border: 1px solid @c;
}
div{
	.box();
}

【库函数】

// 计算两个颜色之间的平均值
.box{
	color: average(red, blue);
}
// 加深颜色
.box{
	color: darken(#bfa, 20%);
}

【运算式】

所有的数值都可以直接运算，直接写运算式，不用写calc()。

【引入】

@import 'url';

• 引入其他的less文件。