聊聊主流框架，Less/Sass/Compass/Bootstrap/H5bp » 社区 | Ruby China

聊聊主流框架，Less/Sass/Compass/Bootstrap/H5bp » 社区 | Ruby China

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

CSS
•
lilu
•
于 9小时前发布
•
最后由 Rei 于 6小时前回复
•
175次阅读

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一起工作吧。