在学习Sass之前，我们先来介绍一下什么是CSS预处理器。因为Sass就是众多CSS预处理器中的其中一种。
一、什么是CSS预处理器？
学过CSS的小伙伴都知道，CSS只是一门描述性的语言，你只能一行一行单纯地描述，并不能像JavaScript那样使用变量、循环、运算等方式来操作。
CSS预处理器的出现，使得我们可以像操作JavaScript那样以[编程]的方式来书写CSS。在CSS预处理器中，我们可以使用变量、循环、函数等方式来简化操作，提高开发效率。说得一点都没错，现在写CSS也可以这么爽了。小伙伴们看到这里，必须大吃一惊：[我out了！]
CSS预处理器，这个术语真专业……不过坑爹的术语，往往都是吓唬人的，实际并不难。CSS预处理器，说白了就是用编程方式来写CSS的一类语言，就这么简单。
CSS预处理器语言有很多，最常见的有3种：
（1）Sass； （2）Less； （3）Stylus；这些CSS预处理语言都具备编程的特性，这种编程方式相对于纯CSS书写方式来说，具有更加简洁、适应性更强、可读性更佳、更易于代码的维护等优点。
二、什么是Sass？
Sass是功能最为强大、最成熟、并且是最为流行的CSS预处理器。因此，对于Sass、Less和Stylus这3个，我们还是建议大家学习Sass。
Sass是一种动态样式语言，比CSS多出好些功能（如变量、嵌套、运算、混入、继承、颜色处理、函数等），更容易阅读。
在学习Sass之前，我们需要一定的HTML、CSS和JavaScript基础，以下是先修课程：
（1） HTML入门教程
（2） CSS入门教程
（3） JavaScript入门教程
想要深入学习Sass的小伙伴，也可以到Sass官网看看： Sass官方文档 。
三、Sass和Less
Sass和Less是当下最为流行的2门CSS预处理语言，也是国内外讨论最热的2个。很多小伙伴在刚刚接触的时候，总是纠结学哪一门好点。这一节，我们来给大家介绍一下Sass和Less的区别。
Sass和Less差别不大，语法也相近。不管是Sass，还是Less，都可以视为一种基于CSS之上的高级语言，其目的都是为了让CSS开发更为灵活和更强大。但是两者也有以下明显区别：
（1）Sass由于是使用Ruby编写的，所以编译的时候是在服务器端处理；而Less由于是使用JavaScript编写的，所以编译的时候是在浏览器端处理； （2）Sass拥有更为强大的功能，如循环、函数、混合宏等，而less却没有； （3）Sass拥有成熟稳定的框架来辅助开发，特别是Compass，而less却没有； （4）Sass在国内外讨论热度最大，并且有一个稳定强大的团队在维护； （5）相当多的公司更为倾向于使用Sass，而不是less；简单来说，Sass是比less更为强大并且使用更广的一门CSS预处理器语言。在实际开发中，如果你只是单纯地想简化CSS写法、统一风格、增强维护性的话，那么Sass和Less是一样的，学习哪一个都可以。
但是如果想要用到更多并且更加强大的功能的话，那么你应该选择Sass。在这里，我也强烈建议小伙伴们学习的是Sass，而不是Less。Sass最强大之处是配合Compass来辅助CSS开发。其中，Compass是在Sass的一个框架，保证让你爽到爆。对于Compass，别忘了关注即将上线的Compass教程。
四、Sass和Scss
在Sass中，有2种语法格式：（1）Sass格式；（2）Scss格式。也就是说，平常我们所说的Sass和Scss其实是同一个东西来的，统称为Sass。Sass和Scss仅仅是Sass的两种语法格式罢了。
Sass格式
Sass格式，是Sass的[旧版本语法]。这种语法格式，不使用大括号[{}]和分号[;]，而是使用严格的缩进式语法规则来书写，也就是类似Ruby语言的写法。
举例：
$color:white $bgColor:red body color:$color background-color:$bgColor
从这里我们可以看出，Sass格式是不使用大括号[{}]和分号[;]的，并且在body元素定义样式的时候，color和background-color这2个属性都是严格缩进的。说明：
Scss格式
Scss格式，是Sass的[新版本语法]。这种语法格式，使用大括号[{}]和分号[;]，并不使用严格的缩进式语法规则来书写，也就是类似CSS书写的格式。
举例：
$color:white
$bgColor:red
body
{
color:$color
background-color:$bgColor
}
从这里我们可以看出，Scss格式跟平常我们写CSS的格式是一样的。
查看更多关于Sass 教程 - Sass入门学习的详细内容...