刚刚过去的2013年,被称为中国互联网金融发展的元年,O2O概念火遍大江南北。QQ自然不甘落后,整个2013年我都在负责QQ查找的商业化推进。来自上层的压力以及各方的重视,使QQ查找始终以每周最少一个版本的速度快速迭代。一段时间下来,我们发现CSS变得越来越臃肿,不可维护和冗余代码越来越多。

之前很早就在社区了解到了Sass和Compass的存在,但没有形成意识上的重视。一直以来手写静态CSS的思维习惯,使得自己并没有看到通过框架来动态创建样式的巨大优势,甚至认为Sass和Compass是非常呆笨的,是给不会CSS的人来使用的。但面对日益庞大的CSS代码,寻找一个有效的技术解决方案就变得非常必要了。

深入之后,才发现自己之前的想法完全错了。Sass并不能让你写出更好的CSS,但是却可以让你更高效地写出高可维护性的CSS。这句话怎么理解呢? 如果你本身对CSS一无所知,那么Sass并不能帮助你实现从菜鸟到CSS大师的转变,Sass的使用建立在你对CSS有一定了解的基础上,它有着一系列令人激动的特性。全面而详细的特性介绍自然需要读者去详读此书,这里我只挑QQ查找受益颇深的几点分享给大家。

  • Sass对原生CSS @import指令的扩展,让我们可以将分布在不同文件中的样式最后合并到一起,这样通过把样式分散到多个更小的文件中,整个CSS的结构立马变得更加清晰了。
  • 变量机制,使得标准的颜色值、行高、列宽再也不用“东一榔头西一棒槌”地分散各处,有了一个统一的地方归纳整理。设计师哪天想变,只需要修改一处即可,省力又省心。
  • 标准样式的抽离,像调用函数一样,轻松将统一的样式抽离出来,避免了拷贝来,拷贝去,一旦交互变动, 只需要修改抽离出来的混合器一处。
  • 样式继承的概念,使得我们对于查找中各种btn的修饰变得清晰,无论何种btn,统一从父级btn继承基础样式。
  • 自动合图实在是太方便了,直接把切图扔到图片目录,对应的合图和CSS就全部自动生成了。

诸如此类的好处实在太多, 留待各位读者通过阅读本书学习和应用吧。

好风凭借力,送我上青云。自从引入了Sass和Compass,QQ查找的样式维护成本大幅下降,给我们带来了莫大的好处。

抱着对Sass和Compass深深的爱与感激,在2013年上海W3CTech的分享大会上,我作为嘉宾重点分享了Sass和Compass,也正是这样一个机会,让我有幸最终结识了李松峰老师。他一直关注国际前沿技术的最新发展,总希望把最先进最好的东西带给国内的开发者。他非常认可Sass和Compass的发展思路,促成引进了《Sass与Compass实战》这本书。当李老师找到我说想请我翻译这本书的时候,我便一口应允下来,并承诺全力以赴,国内现在太缺少这样一本全面介绍Sass和Compass的书籍了。

感谢李松峰老师对本书提出的修改意见,感谢李静老师对本书最后审定和出版付出的努力。

最后,如果读者是初次接触Sass和Compass,我相信这本书一定可以为你打下非常坚实的语言基础,使你进入这一新的技术领域。即便你已经写了很多年Sass了,本书也一定能够加深你对Sass和Compass高级特性的理解,从而把它们更好地应用到你的项目中。

刘炬光
2014年3月4日

刘炬光-materliu 腾讯Web前端工程师,腾讯AlloyTeam核心成员,热爱HTML5 WebApp开发, 在客户端结合的WebApp开发上有非常丰富的经验。注重开发流程自动化,主导所在团队的web开发自动化工作。是国内最早接触sass和compass的程序员,曾在w3ctech等大会上向大家推荐,教授使用sass和compass。

千万级吞吐WebApp(刘炬光)