Font Awesome是Dave Gandy通过字体制作的几百个icons图标。在前端界享有盛名。使用@font-face制作的图标可以随意的放大，并通过CSS中字体相关的CSS对图标进行美化，比如说可以改变图标颜色、大小和增加阴影等，但他也存在一定的弊端。为了使用部分图标，不得不加载所有图标的样式。如果你使用Sass将可以改变这一切，今天这篇文章就是介绍了Sass如何通过几个Mixins和Function等特性来实现按需开启需要的图标。

在Web开发中，每一位写CSS的同学不管使用什么方式进行开发，都必须面对CSS代码中有很多重复性代码。就算你使用OOCSS或者大家讨论激烈的模块化开发，都会有一些代码使用不上。这样直接的后果就是让你的文件变得臃肿，并且难以维护。但是使用Sass，他可以让你避免这些问题。今天我们就通过Sass的@each、@for和@function等方法，来解决这个问题，帮助你减少重复性的代码，甚至是无用的代码，真正做到按需生产。

性能对于Web前端开发人员是必备的一项技能。CSS3和HTML5的新特性帮助我们改善了应用程序，但有时这些特性并没有得到很好的支持。这就是优雅降级。你想在新的浏览器中使用这些特性，但不能忽视对传统浏览器的支持。我最近开始在做一个新的项目，他必须要支持IE8。由于级联问题的嵌套，使用EM单位时不好把控，所以我决定在这个项目中开始使用有用的rem单位，这样更容易理解和维护。这种方法的主要问题是IE8不支持rem单位。最后，我们需要针对于这种情景创建一个后备方案：使用px单位做降级处理。

RWD设计中图片、视频、iframe元素的根据不同设备分辨的响应是令Web前端开发师最为头痛的问题，目前的种种解决方案都并不是一种完美的解决文案。另外很多时候在Web中，产品展示，发布的图片尺寸都不一定一致，致使我们需要通过一定的程序或者手工修改，以达到一种较为完美的展示方式。这些工作对于我们来说都是一种隐形的开发成本。不过，值得庆幸的是，CSS3提供了两个新的属性object-fit和object-position可以很好的帮我们实现图片的长宽比例，并且能快速响应。只不过到目前为止，支持的浏览器为数不多，但我们应该相信，技术是向前发展的，总有一天，这两个属性会广大的前端开发人员提供便利。如果您对他们感兴趣，不仿花点时间阅读一下。

在过去的几年中，移动端使用的飙升，使我们向网络用户提供内容的方法引起了一场进化或者革命。最终目标是流体的，适应移动端和device-agnostic　Web以及一个已成为受人青睐的学派：响应式设计。然而，虽然响应式设计思想高涨，而电子邮件设计和开发一直在努力跟上。在某种程度上，HTML电子邮件对开发者而言是一个异常复杂的介质，这是一个铁的事实。古老的电子邮件客户技术无法呈现现多的许多的规则，致使一些代码无效。但电子邮件仍然是一个关键的营销渠道，这非常的重要，不能让人忽视的是2012年上半年Litmus公布了一个在移动设备上打开电子邮件的报告，报告显示使用移动设备查阅电子邮件增加了80%。同年Campaign Monitor显示，第一次他们的移动电子邮件打开率实际上已经超过了桌面和Web邮箱。

自从Ethan Marcotte在2010年5月25日发布的《A List Apart》文章开始，响应式网页设计(RWD)讨论的热度并没有减少，但在相同的时间内我们构建电子邮件的方式并没有太多的改变。值得庆幸的是，在过去的一年，人们开始使用RWD和运用类似的方法来设计电子邮件。

向用户发布最新的更新、业务或产品，HTML电子邮件是一个最好的方式，但他们有点棘手。电子邮件客户端对CSS的支持不一致。因此我们必须借助于老的技术，如使用表格和内联CSS。今天，我将不可的大家一起创建一个简单的HTML电子邮件。作为Web开发人员，编写HTML电子邮件是一件非常具有挑战性的任务，我们也必须得处理。幸运的是，当我的第一个客户要求我设计和编写一个HTML电子邮件的通知，他耐心的陪我渡过整个编写过程，让我明白了编码HTML电子邮件的一切。你可能不会有我那么幸运，所以本教程可以帮你做好一切的准备。

处理HTML电子邮件将是考验人的耐心。看似小格式问题无法避免地出现，你认为自己：“我是一个优秀的Web开发人员，我甚至擅长HTML5/CSS3，我可以很好的解决这些问题”。几杯咖啡时间之后，你开始发狂，你在开始考虑给大家做什么，提供一个{这里填写空白的电子邮件客户端}。HTML Email Boilerplate可以做出很好的说明。Boilerplate为您提供一些例子和有用的技巧，保证您的电子邮件设计尽可能的在电子邮件客户端正常渲染。您可以使用Boilerplate做为您创建电子邮件的起点。或者，如果你是高级用户，你可以选择里面你需要的片段做为您需要的。

这篇文章主要是来阅读HTML Email Boilerplate模板的源码，以及扩展其相关的知识点，帮助大家更好的理解EDM模板的设计与开发。首先这是一个HTML电子邮件模板，这里的代码及示例代码是创建一个没有设计或布局的模板。他主要作用就是帮助你避免一些最常见的电子邮件客户端(如，Gmail,Outlook和Yahoo邮箱等)渲染时引起的主要问题。虽然不是可以直接插入使用（你知道的，你必须要做一些事情。），但它提供了一些非常有用的例子和代码片段，这些都可以帮助你设计和开发的HTML电子邮件在邮件客户端上能得到更好的渲染。

早前2011年5月就在站上写了一篇《CSS3 Transform》介绍CSS3中Transform属性的简单应用。但这篇文章里的知识无法满足大家对Transform的一个全面认识，最近重新整理了一个Transform系列的文章，希望对初学者有所帮助。前几天介绍了《CSS3 Transform——transform-origin》、《Transform-style和Perspective属性》和《CSS3 2D Transform》。今天是这个系列的最后一篇——CSS3 3D Transform。