主流框架，Less/Sass/Compass/Bootstrap/H5bp

本文为转载学习

原文链接为：http://ruby-china.org/topics/4370

1、SASS and LESS

不管是sass，还是less，都可以视为一种基于css之上的高级语言，其目的是使得css开发更外灵活和更强大，这两者我的感觉是对于程序员来说，sass的功能远比less强大，基本可以说是一种真正的编程语言了，而对于设计师，less相对清晰明了，这里（http://css-tricks.com/sass-vs-less/）是Chris Coyier写的一篇关于SASS和LESS的背靠背对比，可以说是相当中肯的(评论也相当有料喔)。当然，如果使用Rails之类的框架，基于SASS是会来的更方便一些。

2、Compass and Blueprint

sass和compass的关系，在很多人看来类似ruby和rails，compass基于sass，是一个真正意义上的编程框架，提供了大量的mixin（可理解为函数库），无论是对css3繁多的多浏览器写法的简化支持，还是实现各种常见功能的helper，都是强大而丰富的。另外，包括Scott Davis和Eric Meyer的核心团队，也可以说是全明星组合。

Blueprint是一套预定义的样式，包括针对大部分常用的web交互组件的渲染，并且有一个强大的格子布局系统（grid system）。即使不懂设计的程序员，也可以使用blueprint的默认样式做出很漂亮的页面。

Blueprint和Compass，是一个分工很明确的组合，前者负责样式渲染，后者则是基础框架和模块，可以说，在bootstrap诞生之前，是web开发首选的黄金组合。

3、HTML5 Boilerplate

 HTML5 Boilerplate项目(以下简称h5bp)则如同名字一样，实现的是一个web页面的标准模板，尤其针对html5进行了全面优化，同时也对老浏览器向后兼容，基本上来说，h5bp与样式相关的主要部分，是compass的一个子集，不过h5bp并不只限于css，还默认引入了很多很好的js开发库，包括Modernizr和Jquery，再加上一个标准化的index.html模板

 h5bp是这里提到的所有框架中使用起来最方便的，当然受功能限制，她最适用的目标是单页web app或者静态页面，对于复杂的项目来说，需要和其他框架做互补。

 4、Twitter Bootstrap

新兴而野心十足的Bootstrap跟上述又都不同，她是基于LESS的一套前端工具库，意图非常明显，想以一个项目，整合Compass，Blueprint，h5bp的目标功能，成为web前端的一站式解决方案。

• 一整套完整的基础css模块，但不如compass丰富和强大
• 一套预定义样式表，包括一个格子布局系统，和blueprint提供的差不多，只是设计风格不一样
• 一组基于jquery的js交互插件，这是Bootstrap真正强大的地方，也是她严格意义上可以取代Blueprint的原因所在，这些非常不错的小插件，包括对话框，下拉导航等等，不但功能完善，而且十分精致，正在成为众多jquery项目的默认设计标准。

特别提一下，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