CSS预处理器

摘要

随着前端技术的发展,CSS也在发生着些许改变。由于CSS本身的一些局限性,没法像编程语言那样使用变量、条件语句等进行编程化编写。因此,就有人开始思考能不能给CSS加入一些编程元素,让CSS能像其他程序语言一样可以做一些预定的处理。正因为这样,CSS也演化出了一些CSS预处理器,比如广为人知的Sass、Stylus、Less。

随着前端技术的发展,CSS也在发生着些许改变。由于CSS本身的一些局限性,没法像编程语言那样使用变量、条件语句等进行编程化编写。因此,就有人开始思考能不能给CSS加入一些编程元素,让CSS能像其他程序语言一样可以做一些预定的处理。正因为这样,CSS也演化出了一些CSS预处理器,比如广为人知的Sass、Stylus、Less。

Sass诞生于2007年,是最早、最成熟的一款CSS预处理器语言。它可以使用变量、常量、嵌套、混入、函数等功能。

现在的Sass有两套语法规则:老版的语法是用缩进作为分隔符来区分代码块的;新版的语法和CSS一样采用了花括号作为分隔符。新版的语法规则又名Scss,在Sass3之后的版本都支持这种语法规则。

因为Scss语法规则更接近CSS,所以,市场上多数使用Sass的开发者都是以Scss为主。利用Scss,我们可以写出高度灵活、易于维护的CSS。

Less诞生于2009年,其作者受Sass的影响创建的一个开源项目。因为那时的Sass还是使用老版本语法(用缩进作为分隔符来区分代码块),让很多开发者不太习惯。因此,Less作者为了让CSS现有的用户使用起来更加方便、快捷,便创建了Less并提供了类似CSS的书写功能。同样的,Less中也有变量,嵌套等功能。

Stylus诞生于2010年,其来自于Node.js社区,主要用来给Node项目进行CSS预处理支持。Stylus被称为是一种革命性的新语言,其提供一个高效、动态和使用表达方式来生成CSS。Stylus同时支持缩进和CSS常规样式书写规则。

这三种CSS预处理器笔者都使用过。下面笔者说说自己和身边人的感受:

Less给人的感觉没有Sass功能强大;Stylus给人的感觉就是为Python转行前端的人用的。

就笔者观察的情况来看,Scss是目前首推的。原来很多用Less开发的开源项目也已经开始改用Scss了,其中最具代表性的就是Bootstrap。

当然了,万事都具有两面性。至于如何取舍,还是要根据自己的实际情况而定,适合自己的才是最好的。

CSS的好处在于简便、随时随地被使用和调试。CSS预处理器的使用,让我们在开发工作流中多了一个环节,受其嵌套等语法规则的影响,使我们在调试上变得相当麻烦,往往不能第一时间找到要修改的地方。

shaw

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: