HTML/CSS 聊聊主流框架,Less/Sass/Compass/Bootstrap/H5bp

lilu · 2012年07月17日 · 最后由 mackjoner 回复于 2016年03月30日 · 46186 次阅读

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


好文,基础知识普及贴!

能说一下为啥 anjlab-bootstrap-rails不如 bootstrap-sass 么?看递交记录明显 anjlab-bootstrap-rails 更活跃,而且也是 sass 的。

我考虑很久也没想出 scss 和 less 哪个有决定性的优势,所以先用着 Rails 默认的 scss。

因为 less 是 js 实现,比较亲前端社区,可能导致 less 阵营写的网页会漂亮一些。

#2 楼 @ericguo 特别去看了一下 bootstrap-rails 的代码,发现 bootstrap-rails 和 bootstrap-sass 在对 bootstrap 的翻译上实现几乎一致,只是一些名字上的不同,不过我只是过了一遍相对较复杂的 mixin.scss 的内部实现,可能其他模块有比较大的差异也说不定:)

在实现差不多的情况下,bootstrap-sass 我认为还是稍好一点,因为可以很方便地支持 compass,无论有无 rails,都可以挂成 compass 的扩展,这点虽然不需要很多代码实现,但还是很有用的,毕竟用 sass 和 rails 的人基本都需要 compass 和 bootstrap 一起工作吧。

#3 楼 @Rei less 最早是 ruby 实现的,而且 less 和 sass 只是 css 预处理器,和写出的网页是否美观没什么关系~

#5 楼 @lilu

一个前端想从中选一个,他选了 js 实现的 less。

一个 Ruby 后端想选一个,他选了 Ruby 实现的 scss。

于是,less 写的比较好看,因为它背后的社区是前端社区,scss 背后是 ruby 社区,看项目主页就可以知道了。

当然,这不一定,但是 less 现在就有 twitter bootstrap 做例子,如果只是想拿别人的框架来用,那么这些好看的框架是用 less 的可能性更大。如果是想自己写,那么两个都无所谓。

我现在是用 scss。

想问楼主, phonegap,enyo 这类又是什么东西?

#7 楼 @moonjourney phonegap 是让你用 web 技术(html,css 和 js)开发 mobile app 的集成框架,enyo 是个不太知名的 js 框架

框架太多了,真难选择

THX :)

我觉得 Bootstrap 虽然好用,但是不好维护,淘宝 aliceui 那个 css 解决方案(可以这么说把)结合 Bootstrap 一起用比较利于 css 的维护。

正在学习

的确是黄金组合,已经用了很久了。方便的很。

#3 楼 @Rei 网页漂亮否?和这也有关心?

compass 的 sass 貌似早就悄悄换成了 scss 了,当然 config.rb 里面可以设置成 sass。。擦,坟贴。。

#15 楼 @dbian 喜欢 sass。 scss 里面多余的括号好麻烦

#15 楼 @dbian 这里指的是项目的名字

刚在想 Sass 和 Compass 是什么关系,想起你这篇帖子,重新看了看,觉得很精辟。受教了。

#18 楼 @chairy11 我也是,想了解一下 compass,谢谢。

THX~ 感谢感谢

涨姿势了~thx

需要 登录 后方可回复, 如果你还没有账号请点击这里 注册