了解 SASS
+ 什么 SASS ?
=> 目前市场上三大 css 预编译语言之一
1. SASS
2. LESS
3. Stylus
+ 什么是 CSS 预编译语言
=> 就是可以以语言的形式书写 css 样式
=> 但是不能直接在浏览器运行, 需要编译成 css 文件以后运行
=> 需要一个 工具, 工具可以把 sass 书写的代码编译成 .css 文件
=> 一个叫做 SASS 的工具, 安装在你的电脑上
-> 能把你写的 .sass 文件转换成 .css 文件去浏览器运行

sass 工具的安装
1. 依赖什么环境
=> 很早以前, 依赖 rube 环境
=> 后来, 依赖 python 环境
=> 后来, 依赖 node 环境也能使用
2. 如何安装
=> 因为 SASS 是一个依赖于 node 环境的前端工具
=> 我们就可以使用 npm 安装
=> 因为是要 安装在我的电脑上的, 一次安装多次使用
=> 使用 npm 安装全局包
=> 打开命令行, 目录无所谓
=> 输入指令 $ npm install --global sass
-> MAC 指令 $ sudo npm install --global sass
3. 检测安装
=> 打开命令行, 目录无所谓
=> 输入指令 $ sass --version

工具的使用

了解 sass 的文件形式
1. .sass 后缀的文件
2. .scss 后缀的文件
+ 区别:
1. 语法上没有区别
2. .sass 没有大括号的分号, 全部依靠缩进保持关系
3. .scss 文件就是你怎么写 css 就怎么写

编译成 css 文件
1. 单文件编译
=> 打开命令行
=> 切换到你要编译的目录
=> 输入指令 $ sass 编译哪一个文件 编译成哪一个文件
=> 缺点: 每次修改源文件都需要从新编译
2. 单文件实时编译
=> 打开命令行
=> 切换到你要编译的目录
=> 输入指令 $ sass --watch 要编译的文件:编译成的文件
=> 缺点: 只能同时监控一个 scss 文件
3. 文件夹实时编译
=> 能帮我们监控整个文件夹的变化
-> 只要你监控的文件夹里面有任何一个 scss 或者 sass 文件发生变化
-> 就会自动帮你进行编译
=> 打开命令行
=> 切换到你要监控的文件夹的目录
=> 输入指令 $ sass --watch 要监控的文件夹:生成的文件存放的文件夹

map 文件的作用
+ 按照这个形式进行开发, 我要修改样式
=> 修改哪一个文件 ? sass 文件
=> 不能去修改 css 文件, 一旦修改 css 文件, 下次编译的时候, 就会被覆盖了
=> html 里面引入的是 css 文件
=> 当我查看样式的时候, 映射到哪一个文件对应的行
+ 作用:
=> 帮你把原本要映射在 css 文件的行数
=> 直接映射在 sass 文件里面
=> 前提: css 文件里面的映射源注释不要删除