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

SASS and LESS

不论是SASS，仍是LESS，均可以视为一种基于CSS之上的高级语言，其目的是使得CSS开发更灵活和更强大，这二者个人感受是对于程序员来讲，SASS的功能要远比LESS强大，基本能够说是一种真正的编程语言了，而对于设计师，LESS则相对清晰明了，这里是Chris Coyier写的一篇关于SASS和LESS的背靠背对比，能够说是至关中肯的(评论也至关有料喔)。固然，若是使用Rails之类的框架，基于SASS是会来的更方便一些。

---

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开发首选的黄金组合。

---

HTML5 Boilerplate

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

h5bp是这里提到的全部框架中使用起来最方便的，固然受功能限制，她最适用的目标是单页web app或者静态页面，对于复杂的项目来讲，须要和其余框架作互补。

---

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

---

So What?

说了一大堆，该来点结论了，目前对于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一块儿工做吧。