The output styles are covered in SASS documentation.
Although the default CSS style that Sass outputs is very nice and
reflects the structure of the document, tastes and needs vary and so
Sass supports several other styles.
Sass allows you to choose between four different output styles by
setting the :style option or using the --style command-line flag.
:nested
Nested style is the default Sass style, because it reflects the
structure of the CSS styles and the HTML document they’re styling.
Each property has its own line, but the indentation isn’t constant.
Each rule is indented based on how deeply it’s nested. For example:
#main {
color: #fff;
background-color: #000; }
#main p {
width: 10em; }
.huge {
font-size: 10em;
font-weight: bold;
text-decoration: underline; }
Nested style is very useful when looking at large CSS files: it allows
you to easily grasp the structure of the file without actually reading
anything.
:expanded
Expanded is a more typical human-made CSS style, with each property
and rule taking up one line. Properties are indented within the rules,
but the rules aren’t indented in any special way. For example:
#main {
color: #fff;
background-color: #000;
}
#main p {
width: 10em;
}
.huge {
font-size: 10em;
font-weight: bold;
text-decoration: underline;
}
:compact
Compact style takes up less space than Nested or Expanded. It also
draws the focus more to the selectors than to their properties. 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. For
example:
#main { color: #fff; background-color: #000; }
#main p { width: 10em; }
.huge { font-size: 10em; font-weight: bold; text-decoration: underline; }
:compressed
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. It also includes some other minor
compressions, such as choosing the smallest representation for colors.
It’s not meant to be human-readable. For example:
#main{color:#fff;background-color:#000}#main p{width:10em}.huge{font-size:10em;font-weight:bold;text-decoration:underline}