CSS预处理器初次试用总结

　　css预处理器也叫动态样式语言，拥有编程的变量、继承、运算、函数的特性，它可以让你的CSS更加简洁、适应性更强、可读性更佳，更易于代码的维护等诸多好处，常用的有less、sass、stylus。

　　经过几天的试用和实践，主要是对less的使用，总结一下碰到的问题。

　　1、环境搭建

　　安装环境这里就不说了，大家可以参考这里http://www.w3cplus.com/node/683；

　　这里说下我碰到的编译（转化成CSS）问题：sass、less、stylus都可以通过自己的环境用命令编译成css，再引用css就可以使用了，但less比较特别，他分服务器端和客户端，可以引入less.js对其进行编译，不需要再用其他方编译成css再引用，，我一开始在服务器端的环境里，引入了less.js却发现没有任何作用，经过一番折腾后才发现，我搞错了概念，我coding的环境可以算是服务器端环境，所以本机预览页面，less.js是不会起任何作用，后来我通过另外一台设备访问这个项目，样式成功发生了改变。

　　2、实践
　　我用的是less，less基本运用主要有变量、带参数变量、混合变量、模式匹配、嵌套规则等。

　　我的实践case：

=======变量=======

@color:#666;

#header{color:@color;}//输出color:#666;

.bgd{

     background: #f1f1f1;

}

.border-radius(@radius:10px){

     border-radius:@radius;

}

.p{

     .bgd;//输出backgound:#f1f1f1;

     height:100px;

     width:80%;

     color:@333;

     line-height:100px;

     text-align:center;

     .border-radius;//输出border-radius：10px;

}

 ============混合变量==========



.mixin(dark,@color){

     color:darken(@color,10%);

}

.mixin(light,@color){

     color:lighten(@color,10%);

}



.test-a{

     .mixin(light,#3399cc);

     &:hover{.mixin(dark,#3399cc)}//相等于.test-a:hover{}

}

==========模式匹配=====
/**
* 参数匹配
* ex：带几个参数选择相应数量参数的变量
*/
.mixin(@a){

     width:@a;

}

.mixin(@a,@b,@c){

     width:@a;

     height:@b;

     background: @c;

}

.filter{

     .mixin(100px,100px,#ccc);

====嵌套规则=====

.bordered {

    &.float {

    float: left;

    }

    .top {

    margin: 5px;

    }

    }

输出：

.bordered.float {

    float: left;

    }

    .bordered .top {

    margin: 5px;

    }

 

小试了下css预处理器，发现确实蛮强大的，以后可以像编程那样写变量、嵌套了，提高效率，加强复用。