什么是 CSS 预处理器？

“CSS 预处理器用一种专门的编程语言，进行 Web 页面样式设计，然后再编译成正常的 CSS 文件，以供项目使用。CSS 预处理器为 CSS 增加一些编程的特性，无需考虑浏览器的兼容性问题”，例如你可以在 CSS 中使用变量、简单的逻辑程序、函数（如右侧代码编辑器中就使用了变量$color）等等在编程语言中的一些基本特性，可以让你的 CSS 更加简洁、适应性更强、可读性更佳，更易于代码的维护等诸多好处。

什么是 Sass？

Sass 官网上是这样描述 Sass 的：
Sass 是一门高于 CSS 的元语言，它能用来清晰地、结构化地描述文件样式，有着比普通 CSS 更加强大的功能。Sass 能够提供更简洁、更优雅的语法，同时提供多种功能来创建可维护和管理的样式表。

Sass 和 SCSS 有什么区别？

Sass 和 SCSS 其实是同一种东西，我们平时都称之为 Sass，两者之间不同之处有以下两点：

1、文件扩展名不同，Sass 是以“.sass”后缀为扩展名，而 SCSS 是以“.scss”后缀为扩展名
2、语法书写方式不同，Sass 是以严格的缩进式语法规则来书写，不带大括号({})和分号(;)，而 SCSS 的语法书写和我们的 CSS 语法书写方式非常类似。

看个小示例：

** Sass 语法 **

$font-stack: Helvetica, sans-serif  //定义变量
$primary-color: #333 //定义变量

body
  font: 100% $font-stack
  color: $primary-color

** Scss 语法 **

$font-stack: Helvetica, sans-serif;
$primary-color: #333;  // 定义变量

body {
  font: 100% $font-stack;
  color: $primary-color;
}

编译出来的 CSS

body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}

** 注： .sass 和 .scss 不同后缀的文件，代表的两种语法格式，不能串哦！ **

Sass/SCSS 和纯 CSS 写法差很多吗？

Sass 和 CSS 写法有差别：
Sass 和 CSS 写法的确存在一定的差异，由于 Sass 是基于 Ruby 写出来，所以其延续了 Ruby 的书写规范。在书写 Sass 时不带有大括号和分号，其主要是依靠严格的缩进方式来控制的。如：

Sass写法：

body
  color: #fff
  background: #f36

而在 CSS 我们是这样书写：

body{
  color:#fff;
  background:#f36;
}

SCSS 和 CSS 写法无差别：
SCSS 和 CSS 写法无差别，这也是 Sass 后来越来越受大众喜欢原因之一。简单点说，把你现有的“.css”文件直接修改成“.scss”即可使用。

Sass安装（windows版）

在 Windows 平台下安装 Ruby 需要先有 Ruby 安装包，大家可以到 Ruby 的官网（http://rubyinstaller.org/downloads）下载对应需要的 Ruby 版本。

Ruby 安装文件下载好后，可以按应用软件安装步骤进行安装 Ruby。在安装过程中，个人建议将其安装在 C 盘下，在安装过程中选择第二个选项（不选中，就会出现编译时找不到Ruby环境的情况），如下图所示：

'Ruby安装选择项'

一些查看命令

// 修改源 移除源
gem sources --remove https://rubygems.org/
// 指定源
gem sources -a https://ruby.taobao.org/
// 查看源
gem sources -l

返回结果如下：
*** CURRENT SOURCES ***
https://ruby.taobao.org

// 查测 Sass 及更新
sass -v
// 更新 Sass
gem update sass

卸载（删除）Sass

在常期使用的时候难免会碰到无法解决的问题，有时候可能需要卸载 Sass，然后再重新安装 Sass。那么怎么卸载 Sass 呢？

其实他也就是一句命令的事情：

   gem uninstall sass