CSS3在选择器方面添加伪类选择器这方面的特性，比如:nth-child(n)、:nth-of-type(n)这样的选择器，其好处在这里就不多说了。如果你对这方面感兴趣的话，你可以阅读早前整理有关于CSS选择器方面的《CSS3 选择器:伪类选择器》一文。而今天我们要说的是在Sass中如何更灵巧的使用CSS3的一些伪类选择器。

CSS的Animation成为Web Animation中主要实现方式之一。使用CSS 的animation可以在Web中实现一些动画效果。而其中最为关键的还是依赖于@keyframes，让动画可以根据帧定制不同的动画效果。

CSS画图形在Web运用中时常看到，比如三角形、五角星，心形，Ribbon等。不过以前使用CSS绘制图形一般都是借助于border来绘制，但这样的方式受到一定的限制，而且实用价值也有所限制。这篇文章将介绍使用CSS的clip-path来完成正多边形的绘制，并且借助CSS预处理器Sass给这两种方法定义对应的混合宏和函数，实现正多边形的开发。

为了提高码农的开发效率，现在在线上有很多在线小工具，这些小工具可以帮助大家快速实现自己需要的效果，并且可以生成可用代码。前几天看到一个制作三角的小工具，尝试着使用Sass来将其转换成可用的混合宏。尝试成功，来说说怎么实现的。其实只要你有时间，很多小工具都可以用类似的方法来实现。

CSS 预处理器是什么？一般来说，它们基于 CSS 扩展了一套属于自己的 DSL，来解决我们书写 CSS 时难以解决的问题：语法不够强大，比如无法嵌套书写导致模块化开发中需要书写很多重复的选择器；没有变量和合理的样式复用机制，使得逻辑上相关的属性值必须以字面量的形式重复输出，导致难以维护。所以这就决定了 CSS 预处理器的主要目标：提供 CSS 缺失的样式层复用机制、减少冗余代码，提高样式代码的可维护性。这不是锦上添花，而恰恰是雪中送炭。网上已经有不少对比目前最主流的三个预处理器 Less、Sass 和 Stylus（按字母顺序排名）的文章了，但是似乎都不是很详细，或者内容有些过时。下面我会更详细地探讨一下这三种预处理器的特性和它们的差异。

接触Sass差不多有一个年头了，在这一年来的时间中，也花了不少心思在Sass的学习上。同时也让自己喜欢上了Sass,目前在自己的私人项目中，我一直都在使用Sass做为前端开发，用来处理CSS。同时今年自己创建了下Sass中国网站来做Sass相关的技术分享。其实，在W3cplus站点上，已经发布了近一百篇有关于Sass方面的教程(教程有自己的学习心得、有译文，也有其他同学的使用经验分享)。也自认自己是Sass在中国的推广者，其实我也更想做为Sass在中国的布道者，让更多的人了解他，学习他，使用他。

BEM在Sass3.3中就已经实现，很容易使用，不过他还是受到一定的限制。Sass3.4的出现，其选择器功能上做了进一步的优化，所以在Sass3.3中使用BEM受到的限制在这里将不在是问题，可以通过自定义的Function做一定的处理，让BEM在Sass中更为强大。

Sass3.4并不是离开Sass3.3的一个开创性版本，并没有做过多的改变，但有一些小变化还是需要留意的。这些功能在Sass3.3测试版本就有显露出一些，但后面会得到更好的细化。我们来看看这些东西，这些东西对于Sass爱好者还是非常值得期待的。

Sass可以编译出非常优秀的CSS样式表，或者说，这就是Sass要做的事情。有效的使用Sass可以帮助你构建出干净的有效的CSS，但如果运用不好，Sass其实会让你的CSS文件变得更大，并且添加一些不必要的和重复的CSS代码。下面一些编写Sass小技巧，可以有效帮助你编写出更好的Sass。