Sass Output Style

The CSS file that Sass generates uses a default CSS style that reflects the structure of the source document. The default styling is good, but it might not be suitable for all situations. On the other hand, Sass supports several other styles, so you can choose the one that best fits how the generated CSS will be read or shipped.

Sass supports the following output styles:

• Nested Output Style
• Expanded Output Style
• Compact Output Style
• Compressed Output Style

Throughout this tutorial we use the same Sass source so you can compare how each style formats the exact same code. Here is the Sass (.scss) input we will compile:

#first {
  background-color: #00FFFF;
  color: #C0C0C0;

  p {
    width: 10em;
  }
}

.highlight {
  text-decoration: underline;
  font-size: 5em;
  background-color: #FFFF00;
}

Nested Output Style

Nested style is the default styling of Sass (in Node Sass / Ruby Sass).

Every property takes its own line, and the indentation of each rule is based on how deeply it is nested in the original Sass source. Closing braces sit on the same line as the last property, and a blank line separates unrelated groups of rules.

Compiling the source above in nested mode produces:

#first {
  background-color: #00FFFF;
  color: #C0C0C0; }
  #first p {
    width: 10em; }

.highlight {
  text-decoration: underline;
  font-size: 5em;
  background-color: #FFFF00; }

Notice how:

• #first p is indented under #first, reflecting that it was written nested inside #first in the Sass source.
• The closing brace of each rule is placed on the same line as the last property (color: #C0C0C0; } and background-color: #FFFF00; }).
• A blank line separates the #first group from the .highlight group, because they are unrelated rules.

How to enable nested output

From the command line, pass the --style (or --output-style) flag:

sass --style nested input.scss output.css

sass --watch input.scss:output.css --style nested

With the Dart Sass JavaScript API:

const sass = require('sass');

const result = sass.compile('input.scss', { style: 'expanded' });
console.log(result.css);

When to use nested output

• During development and debugging, because the indentation makes the relationship between parent and child selectors easy to follow.
• On large CSS files where the visual structure helps you navigate rules quickly.
• Avoid it for production if file size matters; prefer compressed for shipping.

Expanded Output Style

The expanded output styling takes more space compared to the nested CSS style.

Each property has its own line. The rule section contains the properties, which are all indented within the rules, whereas the rules themselves do not follow any indentation. Closing braces sit on their own line.

#first {
  background-color: #00FFFF;
  color: #C0C0C0;
}
#first p {
  width: 10em;
}

.highlight {
  text-decoration: underline;
  font-size: 5em;
  background-color: #FFFF00;
}

Compact Output Style

The compact CSS styling takes less space than the expanded and nested output styles.

Its main focus is on selectors rather than its properties. It places the selector and all of its properties on the same line. Nested rules are positioned next to each other without a newline, while separate groups of rules will have newlines between them.

#first { background-color: #00FFFF; color: #C0C0C0; }
#first p { width: 10em; }

.highlight { text-decoration: underline; font-size: 5em; background-color: #FFFF00; }

Compressed Output Style

The compressed CSS output styling takes the least amount of space compared to all the other output styles discussed above.

It provides whitespace only to separate selectors and a newline at the end of the file. It also applies minor optimisations, such as choosing the shortest colour representation.

#first{background-color:#00ffff;color:#c0c0c0}#first p{width:10em}.highlight{text-decoration:underline;font-size:5em;background-color:#ff0}

Choosing the Right Style

A common workflow is to use nested or expanded while developing, then switch to compressed for the final build that ships to end users.

sass --watch scss:css --style expanded

sass scss/style.scss dist/style.min.css --style compressed