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