简介

less是一门css的预处理语言

• less是css的增强版，通过less可以编写更少的代码实现更强大的样式
• 在less中添加了许多的新特性，比如对变量的支持、对mixin的支持
• less的语法大体上和css语法一致，但是less中添加了许多对css的扩展，所以浏览器无法直接执行less代码，要执行必须将less转换为css然后执行

基本语法

1.注释

// less中的单行注释，注释中的内容不会被解析到css中
/*
	css中的注释，内容会被解析到css文件中
*/

2.变量
在变量中可以存储一个任意的值，并且可以在需要时任意修改变量中的值

// 变量的语法： @变量名
@a:100px
@b: #bfa

// 使用变量时，直接以 @变量名 形式使用
.box1{
	width:@a;
	color:@b;
}
	
// 作为类名，或者一部分值使用时必须以 @{变量名} 形式使用
@c: box2;
.@{c}{
	width:@a;
	background-image: url("@{c}/1.png");
}

// 变量发生重名时，使用就近原则
@d: 200px;
@d: 300px;
div{
	width:@d;// 此时 width 为300px
	// 可以在变量声明前就使用变量
	div:@e;
}

@e:335px;

3.&符

// 假如想要为外层元素设置一个hover，可以直接使用&，此时&就代表外层元素
.box1{
	&:hover{
		color:orange;
	}
}

4.引用其它样式

• 直接对指定的样式进行引用，相当于将指定的样式在里进行复制

.p2{
	// mixin
	.p1();
}

• 使用类选择器时可以在选择器后边加()，此时实际上就创建了一个mixins

.p4(){
	width:400px;
	height:200px;
}
.p5{
	.p4;
}

• 使用 extend() 对当前选择器扩展指定选择器的样式（相当于选择器分组）

.p1:extend(.box1>.box2){
	color:red;	
}

5.混合函数
在混合函数中可以直接设置变量

.test(@w: 100px, @h: 200px, @bg-color: red){
    width : @w;
    height: @h;
    border: 1px solid @bg-color;
}

div{
    // 调用混合函数，按顺序传递参数
    // .test(200px, 300px, #bfa);
    // .test(@bg-color: red, @h: 300px, @w: 100px)
    .test(300px);
}