css是一种让html与样式分离解析而出现的代码,它的出现大大提高了程序员的工作效率,和后期进行维护的效率。但是发展至今,由于起死板单调的写法,越来越不能满足程序员们灵活的思维,很多时候是种恨铁不成钢的心情来写css,于是,有一些聪明的程序员就发明了less。

  less是为了简化css开发,灵活css开发而出现的,其功能非常强大,灵活性也很高,上手也很快,所以越来越受到前端开发的青睐,其中的基本语法我就不讲了,相信度娘上有无数的教程可以参阅,我就来讲点利用less灵活的特点做的一些东西。

  1 less 解决 css3 的兼容前缀

自动化高效css开发,畅谈less的灵活变化 - jerrylsxu-LMLPHP
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);}//调用
登录后复制
自动化高效css开发,畅谈less的灵活变化 - jerrylsxu-LMLPHP

以此类推,老板再也不用担心我的css3跨浏览器兼容了;

  2 以代码块的方式封装less功能

自动化高效css开发,畅谈less的灵活变化 - jerrylsxu-LMLPHP
 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个,总宽度,行间距
登录后复制
自动化高效css开发,畅谈less的灵活变化 - jerrylsxu-LMLPHP

直接就能出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写自定义颜色渐变按钮以及按钮伪类

自动化高效css开发,畅谈less的灵活变化 - jerrylsxu-LMLPHP
 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;}//调用
登录后复制
自动化高效css开发,畅谈less的灵活变化 - jerrylsxu-LMLPHP

一次性又搞定了渐变,搞定了按钮的伪类,cool!

  4 全局参数设置网站主题

1 @url:"../images/";
2 @bgcolor: #fff;
3 @fcolor:#666;
4 @hcolor:#ccc;
5 ...
登录后复制
调用的时候写对应参数,如果可能,用好less的颜色计算功能,就能调试好整个网站的配色,让你的网站一点也不单调!
登录后复制
09-07 00:41