资讯专栏INFORMATION COLUMN

Compass创建者Chris Eppstein:真正的CSS框架是如何工作的

BigTomato / 798人阅读

摘要:当我的补丁被拒绝了之后,我想要指出一个方向真正的框架是如何工作的。发起这项捐助有我的个人原因在里面,我的父亲在年被确诊为患有一种罕见的成年人形式的线粒体疾病。正是一个经历了如此过程的产品。

  

非商业转载请注明作译者、出处,并保留本文的原始链接:http://www.ituring.com.cn/article/120792

Chris Eppstein,Compass框架的创建者,Sass核心团队成员。Chris有10年以上为硅谷创业公司创建网站和应用程序的经验,痴迷于前端开发。Chris曾是Caring.com的架构师,也是第一位员工,这个网站致力于服务老病人群的护理者。为了能够用有限的经历专心从事Sass和Compass的相关工作,Chris Eppstein离开了工作了6年的Caring.com,加入LinkedIn,从事前端架构和维护Sass & Compass的工作。这是他一直以来梦想的工作。Chris Eppstein著有《Sass与Compass实战》。


Chris Eppstein(左)和前端开发者Liang-Bin Hsueh合影

问:你是如何开始对Sass感兴趣又自创了Compass这个框架的?

  

当我在2007年发现Sass的时候,它还是版本1.8,而且是另一个开源项目Haml的一部分,它是为Ruby设计的HTML模板语言。虽然Haml也不错,但是我发现Sass其实更具有革命性。Sass当时还没有今天我们见到的众多功能,但是对于我来说已经看到了希望:样式表库(经常被称为CSS框架)可以像软件库那样用适合的API来分发,而全然都没有传统CSS框架造成的问题。

Compass最开始的时候是Blueprint CSS架构对Sass的端口。我和Blueprint团队沟通后,他们允许我提交一个补丁,这个补丁使用Sass作为源语言,创建CSS的分发。在那时,Blueprint是一个很成功的开源项目,所以在写这个补丁的时候我花了很多精力。完成补丁的时候,我已经把这个项目中的每行代码都给换了。在这过程之中,我意识到我所创造的工具链是通用的,可以从这个特定的样式表中分割开来。当我的补丁被Blueprint拒绝了之后,我想要指出一个方向:真正的CSS框架是如何工作的。所以我把我的项目称为Compass(指南针),因为它指引了方向,而且听起来和Sass类似。

问:加入LinkedIn的最大收获是什么?LinkedIn在Compass的开发方面有什么帮助?

  

在加入LinkedIn之前,我的工作职务和家庭责任让我几乎没有时间在开源软件上工作。我已经精疲力竭,必须要停止某件事情,所以我放弃了开源软件。但是,开源软件是我的热情所在,所以我开始寻找让开源变成挣钱手段的方法。我考虑过咨询,教学,而且我接触了一些重要的公司,我认为他们有可能乐于看到Sass 和 Compass的开发进展更进一步。LinkedIn很热情地接待了我,和他们的人会面之后,当我意识到他们对于支持开源软件是多么地热忱,我就知道我找到家了。

每个在LinkedIn工作的人都可以把10%的工作时间花在业余项目上,但是我可以花50%的工作时间在我觉得有意义的开源项目上。另50%的时间,我用在提高LinkedIn的静态内容以及样式表架构和工具上。

问:很多业界大牛都向Compass贡献过代码,比如Eric Suzanne 和 Scott Davis。在项目之初,Compass是如何吸引这些人的注意力的?

  

是他们找到了我,在表明想要帮忙的来意之后,我欢迎了他们。当时我们并没有因为任何东西而出名。我们被人所知全是因为后来我们一起努力所创造出的产品。

问:CSS有时会很脆弱,很多人担心一旦他们开始尝试CSS预处理器,会完全改变他们写作和管理样式表的方式。对于他们,你有什么建议吗?

  

CSS有时确实很脆弱,使用Sass则会让你完全改变对于样式表的看法。这是一件好事。但是既然SCSS语法是CSS的超集,你可以一点一点地用你自己的节奏慢慢接受每个功能。第一步就是要把所有的文件名的后缀由.css改成 .scss。祝贺你!现在你已经在写sass了。现在你可以提取某些重复的值,把它们变成变量,这样当你想改变的时候就会更加简单。然后再创造一些mixin让你的样式表中的常见模式更容易维护,在你阅读的时候还会标注出来。然后使用一些嵌套让你更少重复,你的文件也会更易读。就是这么简单!

问:人们经常争论Sass, LESS 和 Stylus哪个更好,你能向我们解释一下它们各自都有哪些独特的优势吗?

  

Sass毫无疑问是最好的样式表处理器,对于大部分人来说都是明智的选择。如果你选择了LESS的话,可能是因为它上手更简单,可以在你的浏览器里运行。以JavaScript/Node.js为基础的项目和LESS与Stylus整合起来更简单,因为它们就是用javascript构建的。Stylus语言的目标使用者更多的是程序员,而LESS相比于Sass来说更倾向于描述,这样设计是为了维护CSS描述性的本质。所有这些工具都会帮助你从简单的CSS魔爪下逃离出来,让你的生活更轻松。

问:随着时间累积,Compass变得越来越大,你有没有考虑在什么时候对Compass做一下优化?

  

Compass从来不会强迫你在样式表中放入任何你不想要的东西。既然如此,从Compass 1.0开始我们已经把Compass分成两个项目,"CLI"是Compass的命令行界面(Command Line Interface),而"Core"全是样式表和配置。核心库可以在没有 CLI 的情况下使用,这也让它和其他以Sass为基础的项目更好地交互,从而加入Compass的支持。最终,Compass的核心会和LibSass一起运行,LibSass是一个以C++为基础的Sass实现,它运行起来非常地块。

问:现在有很多优秀的Sass 和 Compass工具,你个人有什么推荐吗?

  

这个问题很难回答,因为有太多的好工具了。我认为你应该为你的工作选择正确的工具。值得一提的是,Susy 2是一个很棒的网格系统,我认为这个工具很有创意,而且它的出现为Sass API的简洁性和可组合性确立了一个新的标杆。

问:Compass的指定捐助对象为什么是UMDF(联合线粒体疾病基金会)?Compass是一个慈善共享软件,有多少Compass相关工具帮助筹集资金?Compass已经帮助UMDF捐助了多少钱?

  

线粒体疾病是一种罕见的情况,多发于儿童,患病儿童大多数都无法活到成年。捐助的资金都用于治疗和治愈的研究,以及对病人和其家人的支持。发起这项捐助有我的个人原因在里面,我的父亲在1992年被确诊为患有一种罕见的成年人形式的线粒体疾病。

据我现在所知,Compass.app已经捐助了他们一部分的利润。其他的22,000美元都是从社区捐赠而来。小善举也会让爱心汇聚!

问:你曾和很多创业公司有过密切接触,对于急于成功的创业者们你有没有什么建议?

  

有一些。找工作要找你喜欢的,并且周围都是你愿意与之共事的同事。不要以低于市场价值的薪酬工作,不管他们承诺给你多少的股权。不要工作到忘了那些在你生命中真正重要的人,为他们留出足够的时间。如果你拥有了这些,无论你的创业事业发展如何,你都是成功的。

从另一方面来说,对于任何工作或产品,我认为核心技能就是在洗耳倾听和冷静判断之间找到一个平衡,你应该具有相应的品味和眼界来判断什么主张可以让你更接近目标,而什么主张会让你从接近目标的航线上偏离开来,要对使你偏离的主意说不。Sass正是一个经历了如此过程的产品。我们知道我们想要这个语言做到什么,但是我们也会仔细倾听社区和使用者们的建议,他们会指引我们做出对他们来说更有用的产品。

感谢所有阅读这篇访谈的读者,我希望你们也会喜欢我的书《Sass与Compass实战》!我喜欢为你们开发Sass
& Compass,衷心希望你们喜欢使用这个工具。

更多精彩,加入图灵访谈微信!

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/110960.html

相关文章

  • [ 前端实习日记 ] 构建静态页面基础架构

    以前我们敲静态页面都是写好html,css, js,然后再去刷新浏览器,艾尼马又不行,有重新写过再刷新,一个页面下来按chrl+r的次数可让你的键盘多活好几天,要不会刷新快捷按钮那不得手残了都。 后来,grunt,gulp等工具应运而生,当然它们不止这个功能,但却很好地减轻了我们的负担。这篇文章介绍一些如何使用这些工具使构建页面变得简单高效。这只是个人的目前在用的不成熟的方案,更专业的还请参考...

    lidashuang 评论0 收藏0
  • 前端工具系列之一 Gulp

    摘要:从大约年开始前端不再是当初那个切图排版的前端了,各种框架库工具呈井喷之势层出不穷。作为一个怕麻烦的懒人,对于前端的繁杂工作当然是要找一个自动化工具来处理,于是我遇到了。 从(大约)2014年开始,前端不再是当初那个切图排版的前端了,各种MV*框架、库、工具呈井喷之势层出不穷。构建工具比较有名的如Grunt、Gulp、Yeoman、webpack;依赖管理比如bower、npm,当然最流...

    xiongzenghui 评论0 收藏0
  • 使用compass自动合并css雪碧图(css sprite)

    摘要:使用雪碧图,能够减少页面的请求数降低图片占用的字节,以此来达到提升页面访问速度的目的。也正是因为这一点,导致很多开发者懒于使用雪碧图。本文就介绍下怎样使用来自动合并雪碧图。生成的每个雪碧图默认的规则是目录名图片名。 css雪碧图又叫css精灵或css sprite,是一种背景图片的拼合技术。使用css雪碧图,能够减少页面的请求数、降低图片占用的字节,以此来达到提升页面访问速度的目的。但...

    刘永祥 评论0 收藏0
  • [译]148个资源让你成为CSS专家

    摘要:层叠样式表二修订版这是对作出的官方说明。速查表两份表来自一份关于基础特性,一份关于布局。核心第一篇一份来自的基础参考指南简写速查表简写形式参考书使用层叠样式表基础指南,包含使用的好处介绍个方法快速写成高质量的写出高效的一些提示。 迄今为止,我已经收集了100多个精通CSS的资源,它们能让你更好地掌握CSS技巧,使你的布局设计脱颖而出。 CSS3 资源 20个学习CSS3的有用资源 C...

    impig33 评论0 收藏0
  • 第一个AngularJS应用--教程二:基架、建立和测试工具

    摘要:包括脚手架依赖管理准备测试包括单元测试和端到端测试。我们用来开发的工具有。是一个工具集,包含个核心组件,,和脚手架工具。当你正在做自己的一个项目时,使用哪些模块将取决于你自己。这个目录当然是测试文件。 介绍 有很多可用的工具可以帮助你开发AngularJS 应用,那些非常复杂的框架不在我的讨论范围之中,这也是我开始这系列教程的原因。 在第一部分,我们掌握了AngularJS框架的基本...

    k00baa 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<