这是我参与8月更文挑战的第9天，活动详情查看：8月更文挑战

SASS

• SASS官网

• 世界上最成熟、最稳定、最强大的专业级CSS扩展语言！

• sass 是一个 css 的预编译工具

• 也就是能够 更优雅 的书写 css

• sass 写出来的东西 浏览器不认识

• 是要转换成 css 在浏览器中运行

• 这个时候就需要一个工具来帮我们做

安装 sass 环境

• 以前的 sass 需要依赖一个 ruby 的环境

• 现在的 sass 需要依赖一个 python 的环境

• 但是我们的 node 强大了以后，我们只需要依赖 node 环境也可以

• 需要我们使用 npm 安装一个全局的 sass 环境就可以了

  # 安装全局 sass 环境
  $ npm install -g sass
  

编译 sass

• 有了全局的 sass 环境以后

• 我们就可以对 sass 的文件进行编译了

• sass 的文件后缀有两种，一种是 .sass 一种是 .scss

• 他们两个的区别就是有没有 {} 和 ;

• .scss 文件

  h1 {
      width: 100px;
      height: 200px;
  }
  

• .sass 文件

  h1
  	width: 100px
  	height: 200px
  

• 我们比较常用的还是 .scss 文件

• 我们先不管里面的的什么内容，这个 .scss 或者 .sass 文件浏览器就不认识

• 我们就要用指令把这两种文件变成 css 文件

  # 把 index.scss 编译，输出成 index.css
  $ sass index.scss index.css
  

• 这样我们就能得到一个 css 文件，在页面里面也是引入一个 css 文件就可以了

实时编译

• 我们刚才的编译方式只能编译一次

• 当你修改了文件以后要从新执行一遍指令才可以

• 实时编译就是随着你文件的修改，自动从新编译成 css 文件

• 也是使用指令来完成

  # 实时监控 index.scss 文件，只要发生修改就自动编译，并放在 index.css 文件里面
  $ sass --watch index.scss:index.css
  

• 然后你只要修改 index.scss 文件的内容，index.css 文件中的内容会自动更新

实时监控目录

• 之前的实时监控只能监控一个文件

• 但是我们有可能要写很多的文件

• 所以我们要准备一个文件夹，里面放的全部都是 sass 文件

• 实时的把里面的每一个文件都编译到 css 文件夹里面

• 依旧是使用指令的形式来完成

  # 实时监控 sass 这个目录，只要有变化，就会实时响应在 css 文件夹下
  $ sass --watch sass:css
  

• 这样，只要你修改 sass 文件夹下的内容，就会实时的相应在 css 文件夹中

• 你新添加一个文件也会实时响应

• 但是你删除一个文件，css 文件夹中不会自动删除，需要我们自己手动删除