less的使用

1.编译方式

　　1) 脚本编译

　　　　npm install less -g

　　　　lessc  *.less  *.css -x  注：-x 表示压缩

　　2）工具编译 (koala工具)

　　　　下载koala工具  下载地址：http://koala-app.com/

　　　　　　

 

 　　　　　　将需要编译的less文件的目录拖动到此，即可进行自动编译为css文件，操作简单

　　3）webstorm配置自动编译

1.注释

　　1）单行注释  //

　　2）多行注释  /*  */

2.变量

　　1)普通变量

　　@color:red;

　　@fontSize:14px;

　　.title{

　　　　color:@color;

　　　　font-size:@fontSize

　　}

　　2）变量字符串拼接

　　@bgImgPath:"./../images/";

　　.content{

　　　　background-image:url("@{bgImgPath}bg.png");

　　}

3.混合

　　定义函数的形式 需要有点 "." 开头

　　.box(@jc:center,@ia:center){
　　　　display:flex;

　　　　justify-content:@jc;

　　　　items-align:@ia;
　　}

4.模式匹配

　　简单的理解就是，定义相对名称的函数，先定义公共的，在定义不同的

　　看例子更明白

　　　　@_ 表示匹配所有 

　　　　.cell(@_,@color){
　　　　　　width:100px;

　　　　　　height:100px;

　　　　　　border:1px solid transparent;
　　　　}

　　　　.cell(t,@color){
　　　　　　border-top-color:@color;
　　　　}

　　　　.cell(b,@color){

　　　　　　border-bottom-color:@color;

　　　　}

　　　　定义类名样式

　　　　　　.content{

　　　　　　　　.cell(b,#fff);

　　　　　　}

　　　　编译结果为：

　　　　　　　.content{　　

　　　　　　　　width:100px;

　　　　　　　　height:100px;

　　　　　　　　border:1px solid transparent;

　　　　　　　　border-bottom-color:#fff;

　　　　　　　}

　5.嵌套 (less开发必用的方式)

　　一级容器{

　　　　一级容器样式

　　　　二级容器{

　　　　　　二级容器样式

　　　　　　三级容器{

　　　　

　　　　　　}

　　　　}

　　}

　　看例子

　　.content{

　　　　width:640px;margin:0 auto;

　　　　.list{

　　　　　　padding:0 30px;

　　　　　　.item{

　　　　　　　　font-size:12px;

　　　　　　}

　　　　}

　　}