SASS - Output format

Sass compiled CSS output format can be customized. There are four kinds of output formats:

: Nested - nested format
: Expanded - expanded format
: Compact - the compact format
: Compressed - compressed format

The default format is :nested.

You can use :styleoptions or style command-line parameters to set the output format.

:nested

In the context of its monitoring (compiler) command, you can specify the output format nested:

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

nestedFormat, the output of the CSS code:

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

.one {
  background: red; }

.two {
  background: yellow; }

.three {
  background: #ff8000; }

.four {
  background: #ffa600; }

.five {
  background: #ff5900; }

nestedIs the default format, you can not specify.

:expanded

Expand format looks like developer hand-written format.

To CSS output is set to expand the format, you can use the following command:

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

In this format, the output of the CSS code:

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

.one {
  background: red;
}

.two {
  background: yellow;
}

.three {
  background: #ff8000;
}

.four {
  background: #ffa600;
}

.five {
  background: #ff5900;
}

:compact

Compact footprint much smaller format, the definition of each CSS selectors only occupies one row.

To CSS output is set to the compact format, with the following command:

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

In this format, the output of the CSS code:

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

.one { background: red; }

.two { background: yellow; }

.three { background: #ff8000; }

.four { background: #ffa600; }

.five { background: #ff5900; }

:compressed

Compression format to occupy as little space, defined selectors does not wrap, the smallest paper generally used for the production version.

To set the CSS output a compressed format, with the following command:

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

In this format, the output of the CSS code:

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