Sass Output Style

Sass allows you to customize how the CSS output is displayed. There are four output styles to choose from.

By default, Sass outputs the CSS in a nested style, which is a style that reflects the document structure. You can change the way Sass outputs the CSS code to reflect your preference or needs at a given time.

Sass allows you to choose between four styles: nested, expanded, compact, and compressed.

You can switch between output styles by using the :style option, or by using the --style command line flag.

:nested

So, when you first set up the watch on your Sass file or directory, you can use a command like this:

This results in the following CSS output style:

Nested is the default style, so specifying it is optional.

:expanded

The expanded style looks like most human-made style sheets. Each property and rule takes up one line. Properties are indented within the rules, but the rules themsleves aren’t indented in any special way.

To set the CSS output to expanded style, you can use a command like this:

This results in the following CSS output style:

:compact

The compact style takes up a lot less space than the nested and expanded styles. Each CSS rule takes up only one line, with every property defined on that line. Nested rules are placed next to each other with no newline, while separate groups of rules have newlines between them.

To set the CSS output to compact style, you can use a command like this:

This results in the following CSS output style:

:compressed

The compressed style takes up the minimum amount of space possible, having no whitespace except that necessary to separate selectors and a newline at the end of the file.

A style sheet in this style is often referred to as "minimized" and is not meant to be human-readable. The compressed style is ideal for production sites, where it's important to keep file sizes as small as possible.

This results in the following CSS output style: