less的一些用法整理

前提理解：第一个，less是单独的一种文件，可以理解为css的升级版，完全按照css写也没问题，不过它提供了很多便利的东西，可以省好多代码量。第二个，html只认css,所以需要配套一些软件将less解析成css,引用时候，直接引用css就好。gulp,koala 都是常用的，Koala好像简单且方便一点。

 

嵌套

less的优势有很多，最常用也是最让人舒坦的应该就是它的嵌套规则。 我们写css时如果元素过多，每个都像

.test .contnet ul li{ }

这样写的话，大概会疯，结构不清晰，查找起来也不知道哪块归哪块，反正长长的都是css。在less中，则可以这样写

.test{

　　.content{

　　　　ul{

　　　　li{}

　　　　}

　　}

}

看起来好像很烦，其实不是，因为css要写起来，需要四个块，每个块都得把父元素写清楚，不然有可能重名出错（尤其项目大起来的时候，几十个页面，class重名太常见了），而less只需要一个块， .test连同其后代元素全部在它的包裹内设定好，每个元素名称只需要写一次就够了。

&

这个符号在less中可以代替父级元素，举个栗子

a{

　　color：blue；

　　&：hover{

　　　　color：red；

　　}

}

再比如，父元素叫.wrap  儿子元素中有一个叫 .wrap_2，那就可以这样写

.wrap{

　　&_2{}

}

优点：块和块界限可以更清楚，很多东西不需要并列写；时不时还可以偷个懒，比如爸爸类的名字改来改去的时候，写&也省心好多。

 

变量

重要说明：变量需要@开头，比如@width，@height,名字可以随便取

定义的话在相应位置直接写就好，类似于这种(写.box外面也可以)

.box{

　　@width:200px;

　　@height:500px;

　　@my_color:#ccc;

　　

　　width:@width;

　　height:@height;

　　background:@my_color;

}

例子比较简单可能看不出什么优越性，事实上大量重复的，或者是统一的样式使用变量就很方便，而且便于查找和修改，比如统一的背景色，或者统一的字体，字体大小；

注意点：变量有作用域，只能给自己和后代元素用，出了最外层的{}，别的类没法调用。

 

运算

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

@width:500px;

.box{

　　width：@width-50;

}

意思就是450px,这里的计算加减乘除皆可，单位可加可不加。

 

混合

有点类似于函数的调用，这里的话就要说点别的东西了，工作前，我对于css的理解大概就是给html对应的元素设定样式，工作后我才发现，不对，css应该是罗列各种各样的样式，html里只是选择了其中的一款。为什么会产生这种感觉，因为样式会重复，组件会重复，这个页面有个tab切换，别的页面也有tab切换；这个位置有个按钮，其他好几个位置也有一个按钮。如果每个页面都私人定制，那就意味着我们需要不断的写重复的东西，在css中我们没有办法，最多花点时间拷贝过来，但是less中可以方便很多。

/*这里是按钮的统一设置，最好写最外层，方便调用*/

.btn{

　　width:120px;

　　height:30px;

　　line-height:30px;

　　border-radius:15px;

　　color:#fff;

　　font-size:14px;

　　text-align:center;

　　background:#55E276;

　　cursor:pointer;

}

//下方为各种位置的按钮，less中允许双斜线的注释

.submit,.buy,.star{

　　.btn;

}

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

但按钮和按钮毕竟是不一样的，所以需要有所区别，区别可能是颜色，也可能是大小长度，解决方法有两个，planA：公用部分直接调用，区别的部分自己写。planB：传入参数。

 

planA

/*这里是按钮的统一设置，最好写最外层，方便调用*/

.btn{

　　width:120px;

　　height:30px;

　　line-height:30px;

　　border-radius:15px;

　　color:#fff;

　　font-size:14px;

　　text-align:center;

　　background:#55E276;

　　cursor:pointer;

}

//下方为各种位置的按钮，less中允许双斜线的注释

.submit{

　　.btn;

　　box-shadow:0 1px 5px #ccc;

}

.star{

　　.btn;

　　&:hover{

　　　　background:#E65151;

　　}

}

.buy{

　　.btn;

　　border:1px solid #ccc;

}

 

planB

/*传参类似于函数，所以这里的变量作用域仅在{}之内，取什么名字都随意*/

.btn(@color){ //这里加个了括号放参数

　　width:120px;

　　height:30px;

　　line-height:30px;

　　border-radius:15px;

　　color:#fff;

　　font-size:14px;

　　text-align:center;

　　background:@color; //用参数表示

　　cursor:pointer;

}

//下方为各种位置的按钮，背景颜色作为参数传入

.submit{

　　.btn(red);

　　box-shadow:0 1px 5px #ccc;

}

.star{

　　.btn(#55E276);

　　&:hover{

　　　　background:#E65151;

　　}

}

 

其实最后我把两个方案相当于合并了一下，共用但是有区别的用传参解决，独有的，直接写就可以了。

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

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

调用时候是这样的

.submit{

　　.btn();  //这里一定要加括号，需要改默认值，直接写括号里，否则宽度就是500px

}

 

匹配模式

还是上面的例子，如果我一定要用一个.btn(xxxxx)解决，涵盖所有按钮样式，可不可以，答案是可以。匹配模式就是这种可以随便定制的东西，其实理解起来也很简单，括号里多一个命名而已，比如调用这个.btn(no_border,#55E276); 表示无边框样式，背景色为#55E276(注意，命名是没有@符号的)，如果调用.btn(border,#E65151); 表示有边框样式，背景色为#E65151，具体写法如下

.btn(@_,@color){ //不同命名的公共部分要这样写，必须是@_，表示公共部分

　　width:120px;

　　height:30px;

　　line-height:30px;

　　border-radius:15px;

　　color:#fff;

　　font-size:14px;

　　text-align:center;

　　background:@color; //用参数表示

　　cursor:pointer;

}

.btn(no_border,@color){

　　//可以直接这样放着，或者写个border：none   这里的列子举得不好，如果换成左浮动右浮动，或者绝对定位的上下左右，应该更好点

}

.btn(border,@color){

　　border:1px solid #ccc;

}

 

.btn(border); //表示默认背景色有边框，边框颜色也可以写个参数进去

.btn(border,#E65151)//表示背景色#E65151，有边框

 

 

小结

常用的大概就上面那些，避免编译的  ~"..." 或者 用于调试时候的!impotant 这些我都没怎么用过。less相关的函数还有一些，一些高级功能可以去官网上查找，但就我目前而言，工作中使用上面的肯定足够足够了，它已经节省了我大量的时间，免去了很多重复劳动。

转载于:https://www.cnblogs.com/grey-zhou/p/5796496.html