前端必备：六款CSS工具让代码充满魅力

【可苦可乐8 技术】随着一系列围绕JavaScript使用所衍生的相关工具，开发人员与设计师们正亲眼见证着框架、样板以及相似技术方案在扩展、标准化以及加快CSS使用方面所做出的巨大贡献。目前大部分此类方案已经逐步成熟，可以切实帮助开发人员与设计师们在各种设备平台上建立出一致性、响应式网站与Web应用程序。咱们就六大人气CSS技术方案与开发人员们进行了交流，旨在了解空前繁荣的风格化工具选项如何支持他们建立出本身的工具并解决项目进展过程当中遇到的实际问题。

Base

Base是一款轻量级CSS预处理工具，可以将代码编译为SASS(即Syntactically Awesome CSS)或者LESS(Leaner CSS)。尽管已经有不少框架放弃了IE浏览器的支持，Base仍然坚决扮演着IE拥护者的角色，Matthew Hartman表示——他设计Base的初衷在于帮助设计师们编写出更为简洁且结构清晰的CSS代码。

　　尽管目前的版本仍专一于面向桌面系统，但Hartman已经开始着手建立下一个版本、旨在利用通过修改的代码库将移动平台做为首选环境。他指出，Base“在最初进行开发时只具有很是基本的功能，但随着其迅速发展、我开始将其应用在更多不一样类型的网站当中。虽然遇到过许多史无前例的状况以及使人沮丧的错误，但这段学习经历既可怕又充满乐趣。”

　　官方网站：http://matthewhartman.github.io/base/

 

Foundation

　　Foundation框架的专长在于响应式设计，这是一套专门用于建立网站与Web应用的策略方案，可以自动与用户设备上的浏览器环境进行适配。

　　“Foundation是第一款专门帮助用户建立可以运行在任何设备上的响应式站点的CSS框架，”Web设计机构Zurb合做伙伴兼Foundation设计主管Jonathan Smiley指出。“咱们自发布首个公共版本开始就一直致力于打造响应式站点，并且在经历了五个版本的实践研发过程后、咱们已经亲眼见证了众多开发者在建立多设备应用及站点方案时所遭遇的难题，所以有能力帮助他们顺利度过难关。”

　　Foundation使用SCSS(即Sassy CSS)，提供内置组件以简化布局与原型设计，同时容许用户以覆盖方式使用本身的定制化前端。

　　官方网站：http://foundation.zurb.com/

Compass

　　Compass CSS验证框架可以为设计师们带来更为简洁的标记、可重复使用模式同时大大简化了Sprite图像——像这样的优点还有不少。“它并非一套难于上手且须要预先定义的类名称集合。Compass当中所包含的工具数量超过了其它任何CSS框架，”开发人员Lorin Tackett表示，他利用这套框架建立出了一款网格计算器。“Compass充分考虑到了那些在将来可能出现的浏览器支持冲突情况，所以其中一部分功能能够有选择地加以关闭。”

　　Tackett指出，Compass是维护复杂Web应用程序中样式表格的最佳选择。

　　官方网站：http://compass-style.org/

 

Kube

　　Kube标榜自身是一款“专业级”CSS框架。尽管其它框架一样可以提供预约义样式以构建起视觉效果类似的站点外观，但Kube的使用感觉更加简单，Kube项目首席开发者之一Artem Rosnovskiy解释称。

　　“Kube并不会强制限定任何样式规则或者形式，”Rosnovskiy表示，而这一特性使其在专业设计师与开发人员群体当中得到了普遍欢迎。“不少初学者但愿可以在预约义建立流程以前获取更多指导性意见——包括色彩、网格、按钮以及样式等等——但Kube则为设计师与开发人员们带来了完全的自由空间……它要求使用者拥有老练的技能、经验并透彻理解本身想要达成的效果。”

　　官方网站：http://imperavi.com/kube/

Responsive Grid System

　　Responsive Grid System既不属于框架也不属于样板，而是一种可以“快速而简单”的响应式网站建立方式，项目开发者Graham Miller解释道。Responsive Grid System可以直接与现有HTML与CSS相对接。

　　“我发现一旦本身开始着手建立响应式网站，最最须要的就是可以快速切入到本身的现有代码中并以高度灵活的方式构建任何项目，”Miller表示。“我曾经使用过不少不一样类型的框架与样板，但它们都倾向于让我以其为基础设置网格体系、而后向其中填充内容。我是那种‘内容至上’派的开发人员，所以我创建了本身的响应式网格系统。”

　　这套方案的移动版本已经内置于其中，开发人员也能够根据需求自行建立。

　　官方网站：http://www.responsivegridsystem.com/

Gumby

　　上世纪七十年代出生的朋友们可能还对Gumby这位活跃在儿童电视节目上的绿色黏土动画人物留有印象，而现在一样的名字则表明着一款CSS框架。

　　“Bumby这个名字来自定格动画片中的人物，表明着可以为用户带来快速的原型设计体验，”Gumby框架出品方Digital Surgeons公司执行创意总监Peter Sena指出。

　　Gumby提供了多种网格与列式变化，其UI包中还包含按钮、字体以及表单等等。Gumby旨在帮助业余开发人员编写并维护成百上千行代码，Sena表示。目前其版本号为2.6，预计Gumby 3将新增更多目前尚不支持的屏幕尺寸与设备型号，例如某些高分辨率平板设备与触控式笔记本等。

　　官方网站：http://gumbyframework.com/