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文件。