首页IT科技seldom框架(聊聊主流框架,Less/Sass/Compass/Bootstrap/H5bp » 社区 | Ruby China)

seldom框架(聊聊主流框架,Less/Sass/Compass/Bootstrap/H5bp » 社区 | Ruby China)

时间2025-08-03 06:49:27分类IT科技浏览5026
导读:SASS and LESS 不管是SASS,还是LESS,都可以视为一种基于CSS之上的高级语言,其目的是使得CSS开发更灵活和更强大,这两者我的感觉是对于程序员来说,SASS的功能要远比LESS强大,基本可以说是一种真正的编程语言了,而对于设计师,LESS则相对清晰明了,这里是...

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

声明:本站所有文章                        ,如无特殊说明或标注    ,均为本站原创发布                    。任何个人或组织            ,在未征得本站同意时                       ,禁止复制                、盗用                    、采集       、发布本站内容到任何网站            、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益        ,可联系我们进行处理                。

创心域SEO版权声明:以上内容作者已申请原创保护,未经允许不得转载,侵权必究!授权事宜、对本内容有异议或投诉,敬请联系网站管理员,我们将尽快回复您,谢谢合作!

展开全文READ MORE
librosa安装流程(Lisp in a box 安装指南 JAAN的专栏 博客频道 CSDN.NET) windows 11和windows 10哪个好(Windows OpenGL ES 图像褐色)