一、简介

Sass 是一款强化 CSS 的辅助工具，它在 CSS 语法的基础上增加了变量、嵌套、混合、导入等高级功能，这些拓展令 CSS 更加强大与优雅。

官网：https://www.sass.hk/

Sass 有两种语法格式：

• SCSS (Sassy CSS) ：以 .scss 作为拓展名。这种格式仅在 CSS3 语法的基础上进行拓展，所有 CSS3 语法在 SCSS 中都是通用的，同时加入 Sass 的特色功能。（推荐）
• Indented Sass（缩进格式）：以 .sass 作为拓展名。早期语法格式，它使用“缩进”代替“花括号”，使用“换行”代替“分号”。

二、安装 Sass

sass 基于 Ruby 语言开发而成，因此安装 sass 前需要安装 Ruby（注: mac 下自带 Ruby 无需安装）。

Ruby 自带一个叫做 RubyGems 的系统，用来安装基于 Ruby 的软件。我们可以使用这个系统来 轻松地安装 Sass 和 Compass：

// 安装 sass 与 compass
gem install sass
gem install compass

// 查看 sass 版本
sass -v
// 查看 sass 帮助
sass -h

三、编译 scss 文件

// 单文件转换命令
sass input.scss output.css

// 单文件监听命令
sass --watch input.scss:output.css

// 监听整个目录
sass --watch app/sass:public/stylesheets

// 设置编译格式
sass --watch input.scss:output.css --style compact

// 编译添加调试 map
sass --watch input.scss:output.css --sourcemap

// 选择编译格式并添加调试 map
sass --watch input.scss:output.css --style expanded --sourcemap

// 开启debug信息
sass --watch input.scss:output.css --debug-info

四、四种编译格式

// 未编译样式
.box {
  width: 300px;
  height: 400px;
  &-title {
    height: 30px;
    line-height: 30px;
  }
}

1. nested：Sass 默认的输出格式，能够清晰反映 CSS 与 HTML 的结构关系。选择器与属性等单独占用一行，缩进量与 Sass 文件中一致，每行的缩进量反映了其在嵌套规则内的层数。

.box {
  width: 300px;
  height: 400px; }
  .box-title {
    height: 30px;
    line-height: 30px; }

2. expanded：更像是手写的样式，选择器、属性等各占用一行，属性根据选择器缩进，而选择器不做任何缩进。

.box {
  width: 300px;
  height: 400px;
}
.box-title {
  height: 30px;
  line-height: 30px;
}

3. compact：每条 CSS 规则只占一行，包含其下的所有属性。

.box { width: 300px; height: 400px; }
.box-title { height: 30px; line-height: 30px; }

4. compressed：删除所有无意义的空格、空白行、以及注释，力求将文件体积压缩到最小。

.box{width:300px;height:400px}.box-title{height:30px;line-height:30px}

五、VSCode 编译 Sass

安装 Live Sass Compiler 扩展，从状态栏点击 Watch Sass 以打开实时编译，如果要关闭实时编译再次点击即可。