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

随着一系列围绕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/

        Compass

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

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

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

        Foundation

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

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

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

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

        Gumby

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

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

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

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

        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表示。“我曾 经使用过很多不同类型的框架与样板，但它们都倾向于让我以其为基础设置网格体系、然后向其中填充内容。我是那种‘内容至上’派的开发人员，因此我建立了自 己的响应式网格系统。”

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