less的用法整理

什么是less
第一，less是单独的一种文件，可以理解为css的升级版，完全按照css写没有问题，不过它提供了很多的便利的东西，可以少写很多代码。第二，html只认识css，需要配套一些软件将less解析成css，引用的时候，直接引用css就好

嵌套
less有很多好用的地方，最常用就是它的嵌套规则，我们写css时如果元素过多，每个像

.test .content ul li{}

这样写结构就会不清晰，容易搞混淆，在less中，则可以这样写

.test{
.content{
	ul{
		li{
		}
	}
 }
}

看起来很麻烦，其实只要选择器没有用错，这样写起来很方便，而用css写起来，需要写四块，每一块必须把父元素写清楚，不然有可能出现重名情况，而less只需要写一块就可以了，.test后代连同其后代元素在它的包裹内设定好，每一个元素名称只需要写一次就够了。

&
这个符号在less中可以代替父级元素

a{
	color:blue;
	&:hover{
		color:red;
	}
}

再比如，父级元素.wrap 子代元素中有一个.wrap_2,就可以写成这样

.wrap{
	&_2{}
}

块与界分得很清楚，很多东西不需要并列写。

变量
变量需要以@开头，定义变量的话，直接在相应的位置直接写就好
注意点：变量有作用域，只能给自己或后代元素使用，别的类无法调用

运算
有变量当然可以运算，比如

@width:500px;
	.box{
		width:@width-50;
	}

意思就是450px，这里加减乘除皆可，单位可加可不加

混合
有点类似于函数的调用

一次书写，直接调用就好了

传参
传参可以存入默认值，具体这样写

.btn(@width:500px){
	width:@width;
}

调用

.submit{
	.btn();  //这里一定要加括号，需要该默认值，直接写在括号里，不写的话就为默认值
}

以上就是less常用的方法，可以发现less相比css写法，单从代码量上来说就少了很多，写起来也很方便。