在本系列文章的第一部分，我简单介绍了Sass，一种CSS的预处理器。我展示了如何在Codekit中创建一个工程来编写Sass文件，并且介绍了一些Sass的语言格式，关于partials，变量，注释和错误。在第二部分，我们将要深入的研究一下变量和进行变量运算以实现垂直节奏。我也将谈谈使CSS更加容易阅读和维护的Sass的嵌套规则。

响应用户输入可以说是我们界面开发的核心。为了构建响应式Web产品，理解触摸，鼠标，指针，键盘如何和浏览器一起工作是关键。你很有可能已经在移动浏览器上经历了300毫秒的延迟或者在纠结于触摸滚动导致页面卡顿。在这篇文章中，我们将介绍事件级联并且利用这些知识来实现一个支持多种输入法的点击事件而不违反像Opera Mini这些代理浏览器事件规则。

在这篇教程中，我将为你介绍如何在页面滚动时触发CSS动画。这种效果使用JavaScript和CSS就能做到。Jeet Grid System website 就是使用这种小技巧的例子，当你向下滚动的时候，CSS的transform、animation就被触发了。想要达到这种目的，有很多Javascript/jQuery 插件可以用，比如WOW,在这篇教程中，我将为你展示如何不适用插件做到这种效果。

使用Sass，其中最喜欢的就是Sass的mixin和function功能。他们能自动化的重复使用一段CSS代码或功能以及更好的维护CSS。这些功能让人实在是折服。但我常常发现许多开发人员为一个简单的任务创建一个复杂的系统，比如管理一个字体堆栈或颜色方案。这些设置和使用都让人感到非常的繁琐。在这篇文章中，我将解释这些自动化实现的功能。

2012年初成立于上海，先后获得了IDG资本、华晟资本、雄牛资本、红杉资本、经纬中国、险峰华兴、真格基金等知名基金公司的风险投资，2015年初找钢网获得最新一轮1亿美金D轮融资。公司技术中心超过300人，不乏淘宝，京东网易携程等技术大牛。我们将人才视为第一核心竞争力，已经建立起以人为本的企业文化；提供良好的工作环境、富有竞争力的薪资、完善的社保及福利！欢迎简历投致：yixin.zhao@china.zhaogang.com

CSS的clip-path属性是你改变传统单调的盒子布局，走向响应式设计的通行证。你将开始摆脱条条框框，自由地在您的网页上使用六边形、星形和八边形等等进行设计。一旦你真正开始使用clip-path，你可以生成的形状是无限多的，只需要简单地调整几个值即可。虽然这篇文章的重点是使用CSSclip-path完成多边形裁剪，但是所有的demo都提供了内联SVG的参考，这是为了能额外获得Firefox的支持。只要你使用过CSSclip-path创建响应图形，生成响应式的SVG裁剪图形是很容易的。我们后面再详细说说。

当你在屏幕上看SVG图像时，你是通过SVG视窗来看到画布的，所以其实你只看到了画布的一部分。画布和视窗是既相互独立又相互联系的概念，它们之间的关系很容易混淆，导致有时会有预料之外的结果。你只有弄明白了它们之间的关系，才知道如何去控制它们。

在网络中充满了资源告诉你用相对长度em和rem来代替像素，因为它们会使你的设计更容易。几乎我所知道的所有的前端工程师（包括我自己）多年来都盲目的追随这些指示，这在行业中也变成了一个约定俗成的标准。最近我做了一些调查研究，完全改变了我对这两个相对单位的看法。从现在开始我将不会再使用rem并且只会在非常特殊的用例中才会使用em。在这篇文章中我将分享我的观察结果，希望可以说服你结束我们挚爱的rem单位，最终没有回退的使它进入我们的工具（鉴于IE8死的慢），但是变得毫无用处支持更受欢迎的CSS参考像素。

进度条经常运用于网页，即使我们意识到不是所有的东西都将瞬间被加载完成，这些进度条用于提醒使用者关于网页上具体的任务进程，譬如上传，下载，加载应用程序等。以前如果想要创建一个进度条的动画效果，没有使用JavaScript是不可能实现的。然而感谢CSS3的出现，我们现在能够在div里执行动画，添加梯度和彩色元素。事实上，HTML5为实现此目的也创建了一个特殊的进度条元素。 当你看完这个教程，你将会知道怎样使用纯CSS创建一个有平面动画效果的进度条：无需Flash，无需图片，无需JavaScript。

当我们使用CSS3动画时，我们经常讨论如何使用过渡，动画等实战方法。然而动画的强大之处不是集中在单个动画是如何工作的，而是多个动画结合起来，创造出令人震撼的效果。良好的动画设计可以使我们的作品脱颖而出。Disney的 动画的12个基本原则 定义“感染力”为“一个演员的迷人之处。” 它是描述如何使用虚实，风格，和动画的物质叠加起来创建生动的角色，使得观众觉得真实而有趣。