CSS预处理器——sass（上篇：sass介绍与相关知识）

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

【2】 什么是Sass
Sass 是一门高于 CSS 的元语言，它能用来清晰地、结构化地描述文件样式，有着比普通 CSS 更加强大的功能。
Sass 能够提供更简洁、更优雅的语法，同时提供多种功能来创建可维护和管理的样式表。
Sass 是采用 Ruby 语言编写的一款 CSS 预处理语言，它诞生于2007年，是最大的成熟的 CSS 预处理语言。最初它是为了配合 HAML（一种缩进式 HTML 预编译器）而设计的，因此有着和 HTML 一样的缩进式风格。

【3】 Sass与SCSS的区别
Sass 和 SCSS 其实是同一种东西，我们平时都称之为 Sass，两者之间不同之处有以下两点：
1、文件扩展名不同，Sass 是以“.sass”后缀为扩展名，而 SCSS 是以“.scss”后缀为扩展名
2、语法书写方式不同，Sass 是以严格的缩进式语法规则来书写，不带大括号({})和分号(; )，而 SCSS 的语法书写和我们的 CSS 语法书写方式非常类似。

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

body
  color: #fff
  background: #f36

css写法:

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

注释：scss与css写法无差别

【5】Saas编译
因为 Sass 开发之后，要让 Web 页面能调用 Sass 写好的东西，就得有这么一个过程，这个过程就称之为 Sass 编译过程。Sass 的编译有多种方法：

• 命令编译
  命令编译是指使用你电脑中的命令终端，通过输入 Sass 指令来编译 Sass。这种编译方式是最直接也是最简单的一种方式。因为只需要在你的命令终端输入：

//单文件编译：
sass <要编译的Sass文件路径>/style.scss:<要输出CSS文件路径>/style.css
//多文件编译
sass sass/:css/
//上面的命令表示将项目中“sass”文件夹中所有“.scss”(“.sass”)文件编译成“.css”文件，并且将这些 CSS 文件都放在项目中“css”文件夹中。

存在缺点：在实际编译过程中，你会发现上面的命令，只能一次性编译。每次保存“.scss”文件之后，都得重新执行一次这样的命令。如此操作太麻烦，其实还有一种方法，就是在编译 Sass 时，开启“watch”功能，这样只要你的代码进行任保修改，都能自动监测到代码的变化，并且给你直接编译出来：
假设我本地有一个项目，我要把项目中“bootstrap.scss”编译出“bootstrap.css”文件，并且将编译出来的文件放在“css”文件夹中，我就可以在我的命令终端中执行：

sass --watch sass/bootstrap.scss:css/bootstrap.css

下面这两个不做介绍了

• GUI工具编译
• 自动化编译
  注释：
  在Sass的编译的过程中，是不支持“GBK”编码的。所以在创建 Sass 文件时，就需要将文件编码设置为“utf-8”。
  另外一个错误就是路径中的中文字符引起的。建议在项目中文件命名或者文件目录命名不要使用中文字符。

【6】[Sass]不同样式风格的输出方法
在 Sass 中编译出来的样式风格也可以按不同的样式风格显示。

• 嵌套输出方式 nested

编译时带上参数"--style nested"
sass --watch test.scss:test.css --style nested

• 展开输出方式 expanded

编译时带上参数"--style expanded"
sass --watch test.scss:test.css --style expanded

这个输出的 CSS 样式风格和 nested 类似，只是大括号在另起一行

• 紧凑输出方式 compact

编译时带上参数"--style compact"
sass --watch test.scss:test.css --style compact

• 压缩输出方式 compressed

编译时带上参数"--style compressed"
sass --watch test.scss:test.css --style compressed

压缩输出方式会去掉标准的 Sass 和 CSS 注释及空格。也就是压缩好的 CSS 代码样式风格

【7】Sass 的调试
浏览器支持“sourcemap”功能即可，如果是早一点的版本，需要在编译的时候添加“–sourcemap” 参数就可以在浏览器直接编译Sass文件。

sass --watch --scss --sourcemap style.scss:style.css