快速入门less

什么是less?
Less是一门CSS预处理语言，它扩展了CSS语言，增加了变量，Mixin，函数等特性，使CSS更易维护和扩展。更少可以运行在Node或浏览器端

安装：安装Less的最简单方法是通过npm，node.js包管理器

$ npm install -g less

命令行用法：

//命令行调用编译器
$ lessc styles.less

//输出编译的CSS
$ lessc styles.less styles.css

更多可参考less

实例：

less变量?

定义变量时使用@
@color:red;
div{
	width:100px;
	height:100px;
	background-color:@color;
}
//编译出来的结果
div{
	width:100px;
	height:100px;
	background-color:red;
}

混入：?

//类混入：
.width{
	width:50px;
}
.f_left{
	float: left;
}
div{
	.width();
	.f_left();
}
//编译后的结果
div{
	width:50px;
	flot:left;
}

函数混入（不需要样式编译在css中）：?

.width(){
  width: 50px;
}
.f_left(){
  float: left;
}
//编译后的结果（上述函数将不会编译在css文件中）
div{
	width:50px;
	flot:left;
}
//定义函数传参
.f(@decrition:left){
  float: @decrition;
}
.borderRadius(@radius:10px){
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  -o-border-radius: @radius;
  -ms-border-radius: @radius;
  border-radius: @radius;
}
.box{
  .f();
  .borderRadius();
}
//可根据传入的参数编译出对应的css文件