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预处理器,发现确实蛮强大的,以后可以像编程那样写变量、嵌套了,提高效率,加强复用。
<script type="text/javascript"> </script><script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>