SASS - 输出格式

---

• SASS – 简介
• SASS – 环境搭建
• SASS – 使用Sass程序
• SASS – 语法
• SASS – 变量
• SASS- 局部文件(Partial)
• SASS – 混合(Mixin)
• SASS – @extend（继承）指令
• SASS – 操作符
• SASS – 函数
• SASS – 输出格式

---

Sass编译输出的CSS格式可以自定义。有4种输出格式：

• :nested - 嵌套格式
• :expanded - 展开格式
• :compact - 紧凑格式
• :compressed - 压缩格式

默认格式是:nested。

可以使用:style选项或使用style命令行参数设置输出格式。

:nested

在执行监测(编译)命令时，可以指定输出格式为nested：

sass --watch styles.scss:styles.css --style nested

nested格式下，输出的CSS代码:

div {
  padding: 20px;
  margin: 20px; }

.one {
  background: red; }

.two {
  background: yellow; }

.three {
  background: #ff8000; }

.four {
  background: #ffa600; }

.five {
  background: #ff5900; }

nested是默认格式，可以不指定。

:expanded

展开格式看起来像开发人员手写的格式。

要将CSS输出设置为展开格式，可以使用如下命令:

sass --watch styles.scss:styles.css --style expanded

该格式下，输出的CSS代码:

div {
  padding: 20px;
  margin: 20px;
}

.one {
  background: red;
}

.two {
  background: yellow;
}

.three {
  background: #ff8000;
}

.four {
  background: #ffa600;
}

.five {
  background: #ff5900;
}

:compact

紧凑格式占用的空间要小得多，每个CSS选择符定义只占用一行。

要将CSS输出设置为紧凑格式，可以使用如下命令:

sass --watch styles.scss:styles.css --style compact

该格式下，输出的CSS代码:

div { padding: 20px; margin: 20px; }

.one { background: red; }

.two { background: yellow; }

.three { background: #ff8000; }

.four { background: #ffa600; }

.five { background: #ff5900; }

:compressed

压缩格式占用尽可能少的空间，选择符定义不换行，文件最小，一般用于生产版本。

要将CSS输出设置为压缩格式，可以使用如下命令:

sass --watch styles.scss:styles.css --style compressed

该格式下，输出的CSS代码:

div{padding:20px;margin:20px}.one{background:red}.two{background:yellow}.three{background:#ff8000}.four{background:#ffa600}.five{background:#ff5900}