进度圈(Progress Circles)是经典的仪表盘元素，可以将统计数据直观地展现为摘要视图。我们可以通过JavaScript和Canvas渲染，再配合CSS，图片或者利用SVG实现一个进度圈。使用SVG实现一个进度圈并没有想象中那么难，我们先从基本的开始。

同HTML元素一样，我们可以通过transform函数操作SVG元素。然而transform在SVG元素和HTML元素上的工作方式会有一些差别。首先，IE不支持SVG元素的CSS transform属性，但是如果只是应用一些2D变换，为了适配IE,我们可以使用SVG的transform属性。SVG的transform属性中的所有函数的参数只能是纯数字，比如说，我们不能在translate函数中使用%单位（虽说在火狐浏览器中的CSS transform属性也不能使用—此处有链接—），rotate，skew角度只能使用deg单位，我们能在CSS transform属性中可以使用的所有其它单位在这里都不能使用。

上周看到有一篇关于CSS滤镜效果函数的文章，其中的效果函数相对来说比较容易理解，而且上手难度低。但是，这种方式仅仅是添加CSS滤镜效果众多方式中最弱的一种。今天让我们来看一看滤镜基元，这是为图片和元素添加滤镜效果另外一种更加强大的方法。

在Sass中有很多方法可以解决媒体查询这个问题，但是其中一些方法存在相同的问题。一开始我会还原这个问题，然后提供我的解决方案，最后列出这个方案对工作流程的好处。

Mixins允许我们在项目中复用样式片段，可以传递参数这个特性使得它们非常灵活，强大。同样，我们也可以使用@extend命令让一个选择器继承其它选择器去复用样式片段。有的时候Mixin和extend好像做了同样的事情，那我们应该选择哪一个呢？

本文不会像一些其它文章一样，教你如何开始使用Sass，我会告诉你为什么使用Sass，我到底喜欢它什么。我最初是在一个Laravel项目中，接触了Sass，Larvel是个PHP框架，内建有Elixir服务支持Sass。你可能觉得说这个玩意跟我们没啥关系，但是重点是Larvel支持Sass,使Sass非常容易上手，这就促使我去尝试使用Sass,慢慢了解到它的很多优点。之前，我总觉得，写脚本在CSS里会把本应简单的事情变复杂，然后不确定是否应该花时间去学习它。但是我慢慢发现，它的好处很多，还好当初没有放弃。