不管是SASS,还是LESS,都可以视为一种基于 CSS 之上的高级语言,其目的是使得 CSS 开发更灵活和更强大,这两者我的感觉是对于程序员来说,SASS 的功能要远比 LESS 强大,基本可以说是一种真正的编程语言了,而对于设计师,LESS 则相对清晰明了,这里是 Chris Coyier 写的一篇关于 SASS 和 LESS 的背靠背对比,可以说是相当中肯的 (评论也相当有料喔)。当然,如果使用 Rails 之类的框架,基于 SASS 是会来的更方便一些。
SASS 和Compass的关系,在很多人来看类似于 ruby 和 rails,compass 基于 SASS,是一个真正意义上的编程框架,提供了大量的 mixin(可理解为函数库),无论是对 css3 繁杂的多浏览器写法的简化支持,还是实现各种常见功能的 helper,都是强大而丰富的。另外,包括 Scott Davis 和 Eric Meyer 的核心团队,也可以说是全明星组合。
Blueprint是一套预定义的样式,包括对大部分常用 web 交互组件的渲染,并且有一个强大的格子布局系统 (grid system),即使不懂设计的程序员,也可以使用 blueprint 的默认样式做出很漂亮的页面。
Blueprint 和 Compass,是一个分工很明确的组合,前者负责样式渲染,后者则是基础框架和模块,可以说,在 bootstrap 诞生之前,是 web 开发首选的黄金组合。
HTML5 Boilerplate项目 (以下简称 h5bp) 则如同名字一样,实现的是一个 web 页面的标准模板,尤其针对 html5 进行了全面优化,同时也对老浏览器向后兼容,基本上来说,h5bp 与样式相关的主要部分,是 compass 的一个子集,不过 h5bp 并不只限于 css,还默认引入了很多很好的 js 开发库,包括Modernizr和 Jquery,再加上一个标准化的 index.html 模板
h5bp 是这里提到的所有框架中使用起来最方便的,当然受功能限制,她最适用的目标是单页 web app 或者静态页面,对于复杂的项目来说,需要和其他框架做互补。
新兴而野心十足的 Bootstrap 跟上述又都不同,她是基于 LESS 的一套前端工具库,意图非常明显,想以一个项目,整合 Compass,Blueprint,h5bp 的目标功能,成为 web 前端的一站式解决方案。
特别提一下,Bootstrap 使用Normalize.css来进行 Reset CSS,这一项目已经成为了事实标准 (超过 Compass 的 Eric meyer 2.0),强烈推荐使用,另外前边说的 h5bp 也使用 Normalize,因此,如果你在项目中同时使用了 h5bp 和 Bootstrap,请注意,没有必要再引入 h5bp 的初始样式表 style.css
说了一大堆,该来点结论了,目前对于 web 开发,尤其是由程序员进行的 full stack 开发,最好的组合是:
SASS+Compass+Bootstrap
这样既可以利用 SASS 强大的编程能力,Compass 强大的底层函数,又可以获取 Bootstrap 丰富的 UI 组件支持。
只是,Bootstrap 是基于 LESS 的,要让她们协同工作,需要一个 SASS 的 Bootstrap 移植版本,幸亏 github 上从来不缺这类项目,当前最好的一个是bootstrap-sass
@ericguo 特别去看了一下 bootstrap-rails 的代码,发现 bootstrap-rails 和 bootstrap-sass 在对 bootstrap 的翻译上实现几乎一致,只是一些名字上的不同,不过我只是过了一遍相对较复杂的 mixin.scss 的内部实现,可能其他模块有比较大的差异也说不定:)
在实现差不多的情况下,bootstrap-sass 我认为还是稍好一点,因为可以很方便地支持 compass,无论有无 rails,都可以挂成 compass 的扩展,这点虽然不需要很多代码实现,但还是很有用的,毕竟用 sass 和 rails 的人基本都需要 compass 和 bootstrap 一起工作吧。