less基本语法

注释

less的注释有两种方式，一种为css用的/**/,这种注释的方法会被less所编译成css。另一种为//，这种不会被less所编译
less代码

/*会被编译*/
//不会被编译

css输出代码

/*会被编译*/

变量

less中用@变量名:值的方法来生命变量
less代码

@test_width:100px;
@test_color:red;
.box{
	width:@test_width ;
	height:@test_width ;
	background:@test_color ;
}

css输出代码

.box {
  width: 100px;
  height: 100px;
  background: red;
}

混入

可以将定义好的样式引入到另一个样式中，类似于函数的调用
less代码

//这里是没带参数的嵌套
.addradius(){
	border-radius: 10px;
}
//这里是带参数的嵌套
.addboder(@test_color){
	border: 1px solid @test_color;
}
//这里是带默认值的参数嵌套,keyi1
.addmargin(@v:10px){
	margin: @v;
}
.box{
	width:100px;
	height:100px ;
	background:red;
	.addradius;
	.addboder(red);
	.addmargin;
}

css输出代码

.box {
  width: 100px;
  height: 100px ;
  background: red;
  border-radius: 10px;
  border: 1px solid red;
  margin: 10px;
}

匹配模式

相当于条件判断，只有满足条件才匹配
less代码

//括号内的不带符号的参数代表条件
.pos(r){
	position: relative;
}
.pos(a){
	position: absolute;
}
.pos(f){
	position: fixed;
}
.box{
	.pos(a);
}

css输出代码

.box {
  position: absolute;
}

运算

less里的变量可以直接进行运算
less代码

@lenght:100px;
//减法的变量之间一定要有空格
.box{
	width: (@lenght + 20)/4;
	height: @lenght - 20*3;
}

css输出代码

.box {
  width: 30px;
  height: 40px;
}

嵌套

可以实现多层嵌套以及多个关系嵌套
less代码

ul{
	list-style: none;
	width: 100px;
	li{
		height: 20px;
		a{
			background: red;
			//&相当于上一个选择器
			&:hover{
				background: blue;
			}
		}
	}
	>.left{
		float: left;
		width: 10px;
		height: 10px;
		background-color: red;
	}
	.right{
		float: right;
		width: 10px;
		height: 10px;
		background-color: red;
	}
}

css输出代码

ul {
  list-style: none;
  width: 100px;
}
ul li {
  height: 20px;
}
ul li a {
  background: red;
}
ul li a:hover {
  background: blue;
}
ul > .left {
  float: left;
  width: 10px;
  height: 10px;
  background-color: red;
}
ul .right {
  float: right;
  width: 10px;
  height: 10px;
  background-color: red;
}

@arguments

@arguments包含所有变量
less代码

.addborder(@l:1px,@s:solid,@c:red){
	border: @arguments;
}
.box{
	.addborder();
}

css输出代码

.box {
  border: yellow solid red;
}