SASS使用详解 （安装环境，编译，语法）

SASS

• SASS官网

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

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

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

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

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

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

安装 sass 环境

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

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

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

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

  # 安装全局 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
  

• 然后你只要修改 index.scss 文件的内容，index.css 文件