介绍
sass 是一个 css 的预编译工具
- 也就是能够 更优雅 的书写
css sass写出来的东西 浏览器不认识- 依旧是要转换成
css在浏览器中运行 - 这个时候就需要一个工具来帮我们做
安装环境
- 以前的
sass需要依赖一个ruby的环境 - 现在的
sass需要依赖一个python的环境 - 但是在
node强大了以后，我们只需要依赖node环境也可以 - 需要我们使用
npm安装一个全局的sass环境就可以了
# 安装全局 sass 环境 $ npm install sass -g
编译 sass
- 有了全局的
sass环境以后 - 我们就可以对
sass的文件进行编译了 sass的文件后缀有两种，一种是.sass一种是.scss- 他们两个的区别就是有没有
{}和; .scss文件
body { color: red; }
.sass文件
body color: red
- 我们比较常用的还是
.scss文件 - 因为
.sass我们写不习惯，当然，如果你能写习惯也比较好用 - 我们先不管里面的的什么内容，这个
.scss或者.sass文件浏览器就不认识 - 我们就要用指令把这两种文件变成
css文件
# 把 style.scss 编译，输出成 style.css $ sass style.scss style.css
- 这样我们就能得到一个
css文件，在页面里面也是引入一个css文件就可以了
实时编译
- 我们刚才的编译方式只能编译一次
- 当你修改了文件以后要从新执行一遍指令才可以
- 实时编译就是随着你文件的修改，自动从新编译成
css文件 - 也是使用指令来完成
# 实时监控 style.scss 文件，只要发生修改就自动编译，并放在 style.css 文件里面 $ sass --watch style.scss:style.css
- 然后你只要修改
style.scss文件的内容，style.css文件中的内容会自动更新
实时监控目录
- 之前的实时监控只能监控一个文件
- 但是我们有可能要写很多的文件
- 所以我们要准备一个文件夹，里面放的全部都是
sass文件 - 实时的把里面的每一个文件都编译到
css文件夹里面 - 依旧是使用指令的形式来完成
# 实时监控 sass 这个目录，只要有变化，就会实时响应在 css 文件夹下 $ sass --watch sass:css
- 这样，只要你修改
sass文件夹下的内容，就会实时的相应在css文件夹中 - 你新添加一个文件也会实时响应
- 但是你删除一个文件，
css文件夹中不会自动删除，需要我们自己手动删除
