Sass用法

# SASS

- [SASS官网](https://www.sass.hk/)

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

- `sass` 是一个 css 的预编译工具

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

- `sass` 写出来的东西 **浏览器不认识**

- 依旧是要转换成 css 在浏览器中运行

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



## 安装 sass 环境

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

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

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

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

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

编译 sass

• 有了全局的 sass 环境以后

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

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

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

• .scss 文件

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

• .sass 文件

  h1 
  	width: 100px
  	height: 200px
  

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

• 因为 .sass 我们写不习惯，当然，如果你能写习惯也比较好用

• 我们先不管里面的的什么内容，至少这个 .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