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预处理器，发现确实蛮强大的，以后可以像编程那样写变量、嵌套了，提高效率，加强复用。