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}


浙ICP备17015664号 浙公网安备 33011002012336号 联系我们 网站地图  
@2019 qikegu.com 版权所有,禁止转载