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

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

在这篇文章中我主要想给大家阐述在使用Sass来编写CSS和OOCSS两者之间的差异。在开始之前，我想在大家对定义语义化和演示(视觉)类名之间的差异有所了解。

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

为了有效的维护和开发项目，代码的重复利用就显得尤为重要。在Sass中，除了@import和@extend可以使你的代码更加具有重复利用性，@mixin指令也同样能提高你代码的重复使用率并简化你的代码。

当我们提及预编译的时候，我经常会被问到的一个问题是Mixins 还是 @extend ? 关于这个话题我经常直言不讳，而且鉴于以下的这几条原因，我坚定的认为你应该避免使用@extend:

BEM是由Yandex团队提出的一种CSS Class 命名方法，旨在更好的创建CSS/Sass模块。他需要遵循一些特殊规定，有些人认为这些规定很冗余，但是我发现他们对于理解DOM有着很大的帮助。你可以去查看我之前的文章去了解为什么BEM如此伟大。或者你可以去查看这几篇中文文章来了解BEM(《BEM的定义》《为什么我们需要BEM》)。今天这篇文章，是我在假设你对BEM和Sass已经有所了解甚至熟悉的基础上完成的。

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

如果你会了Sass，你就会了ES2015!...虽然不是全部，但也有很多惊人的相似之处！当学习最新的ECMAScript 规范，ES2015(以前被称为ES6)时，碰到了一些让我立刻想到Sass的特性。

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