在最近的一个项目中，我们终于将Flexbox广泛用于页面布局当中。通过这次实战，让我对Flexbox相关知识有了更进一步的了解，也在这方面增涨了不少的知识。接下来，我将分三个部分来解释Flexbox在Web布局中的实战。

去年的大部分时间我写的CSS都放在一个预处理的Sass文件中，尤其是在一个.scss文件中。对我来说不错，但没有好好利用Sass提供的特性。我的SCSS文件通常比嵌套输出的CSS要小。我大量使用变量和引入不常用的混合宏，但它使用起来是最简单不过的。我想改变现状，并希望你们不要介意,如果我大胆想出如何开始创建更加模块化和可维护的Sass项目。

很多(JavaScript)开发者都在讨论"作用域"，但它是什么？它们在JavaScript中的任何地方！我发现很多年轻的开发者不知道作用域是什么。他们中大多数人可以用jQuery做一些很酷的东西。但只是停留在从网上复制一些代码片段，修改一下他们懂的地方并且粘贴到一个JavaScript文件中的程度。了解什么是作用域和你能用它做什么是很重要的，我希望能帮你更好地理解它。我讲的大多数内容都来自我为一些年轻开发者们做了很多次的演讲。(JavaScript基础教程)

我们采用错开动画的方式来重建这样的效果，而不是一次就控制一组动画。随着每一个项目动画延迟时间的增加，它们表现的就像是一个个独立的个体，但仍然会作为一个整体正确的移动。这样的结果感觉更加迷人且真实。

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

你可能已经听说过PostCSS,它比libsass快了几乎两倍(并且比Ruby Sass快了28倍)；或者听说过它支持cssnext和CSS Modules而且可扩展功能,但你是否已经找机会尝试一下了？PostCSS最强大之处在于它是模块化并且基于插件的架构，不过这也是个缺点。如果你之前在项目中使用Sass(比如大多数的设计师和前端开发者)，你从不需要配置任何东西——Sass内置了全部实用功能，开箱即用。然而，PostCSS需要你做一些配置。你不得不从一眼看不到底的插件列表选择插件并且自己把全部插件一起配置。

同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现在已经能实现比网站开发者预料到的更多的功能，并且随着时间的推移，样式表语言越来越强大，能实现许多原先需要依靠JavaScript才能实现的功能。在这篇文章中我们将会介绍CSS函数中8种有用的小技巧。

如果你已经对CSS有了一定的了解，也许你之前已经掌握了一些字体加载的方法，那么你使用过font-display吗？font-display是CSS中新添加的属性，它能实现之前类似于Font Loading API和Bram Stein's Font Face Observer这种第三方脚本实现的功能。如果这是你第一次接触这类知识，那也没有关系，我们会先简单介绍一下浏览器加载字体的默认方法。

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