自动化高效css开发，畅谈less的灵活变化
时间：2014-05-08 12:44:48
收藏：0
阅读：456
css是一种让html与样式分离解析而出现的代码，它的出现大大提高了程序员的工作效率，和后期进行维护的效率。但是发展至今，由于起死板单调的写法，越来越不能满足程序员们灵活的思维，很多时候是种恨铁不成钢的心情来写css，于是，有一些聪明的程序员就发明了less。
less是为了简化css开发，灵活css开发而出现的，其功能非常强大，灵活性也很高，上手也很快，所以越来越受到前端开发的青睐，其中的基本语法我就不讲了，相信度娘上有无数的教程可以参阅，我就来讲点利用less灵活的特点做的一些东西。
1 less 解决 css3 的兼容前缀
1 .box-shadow(@shadow){ 2 -webkit-box-shadow:@shadow; 3 -moz-box-shadow:@shadow; 4 -o-box-shadow:@shadow; 5 box-shadow:@shadow; 6 } #box{.box-shadow(2px 2px 3px #ccc);}//调用
以此类推，老板再也不用担心我的css3跨浏览器兼容了；
2 以代码块的方式封装less功能
1 .list(@show:4, @width:100%, @line:10px){ 2 width: @width; overflow: hidden; 3 ul{ 4 .cf; margin-right: -@line; background-color: red 5 } 6 li{ 7 float:left; width: (@width - (@show - 1) * @line) / @show; margin-right: @line;margin-bottom: @line; 8 img{ max-width: 100%; } 9 } 10 }
#xx_list{.list(4, 1030px, 10px);}//调用，参数为：一行显示4个，总宽度，行间距
直接就能出item列表了，（.cf为清除浮动less，具体代码如下：）
1 .cf(){ 2 min-height: 1px;zoom:1; 3 &:after{content:""; display: block;height: 0; clear: both;visibility:hidden} 4 }
3 less写自定义颜色渐变按钮以及按钮伪类
1 .q-grad(@bgcolor:red, @origin: left, @alpha: 0.2) { 2 background-color: @bgcolor; 3 background-image: -webkit-linear-gradient(@origin, rgba(0,0,0,0.0), rgba(0,0,0,@alpha)); 4 background-image: -moz-linear-gradient(@origin, rgba(0,0,0,0.0), rgba(0,0,0,@alpha)); 5 background-image: -o-linear-gradient(@origin, rgba(0,0,0,0.0), rgba(0,0,0,@alpha)); 6 background-image: -ms-linear-gradient(@origin, rgba(0,0,0,0.0), rgba(0,0,0,@alpha)); 7 background-image: linear-gradient(@origin, rgba(0,0,0,0.0), rgba(0,0,0,@alpha)); 8 } 9 .btn(@color, @bor-ra:2px, @fcolor: @color / 2){ 10 .q-grad(@color, top, 0.1); color: @fcolor; border:1px solid @color / 1.2; cursor: pointer; .border-radius(@bor-ra);.transition(all 0.2s ease); 11 &:hover{ 12 background-color: @color / 1.1; 13 } 14 &:active{ 15 background-image: none; 16 } 17 }
.btns{.btn(@tcolor, 3px); padding: 15px 50px;}//调用
一次性又搞定了渐变，搞定了按钮的伪类，cool！
?
4 全局参数设置网站主题
1 @url:"../images/"; 2 @bgcolor: #fff; 3 @fcolor:#666; 4 @hcolor:#ccc; 5 ...
调用的时候写对应参数，如果可能，用好less的颜色计算功能，就能调试好整个网站的配色，让你的网站一点也不单调！
评论（0）