When you compile your Sass, a CSS file is generated. But what if you want that CSS file to be in a slightly different format? We have a few options to choose from. This means you can have your CSS output in a style that you prefer.

In the command line, you can type this:

Follow this with the name of the style you want. The four options we have are called nested, expanded, compact, and compressed.

Nested is the default output style. It looks very much like regular CSS, with curly braces and semicolons.

Expanded is, as its name suggests, an expanded form of the CSS output. All classes—including nested ones—expand rather than remaining nested in their parents. Both nested and expanded styles are probably the easiest to read, but they also have the largest file sizes.

Compact puts all the properties of a selector on one line so it’s easier to scan down a list of selectors.

Finally, compressed is possibly the most difficult to read. All spaces are removed, so the CSS sits on one line. This makes a compressed CSS file the smallest, which is great for mobile devices, for example.

• Check out the Sass we’ll be compiling in each case.

  basics/outputs.scss
  ​	.infobox {
  ​	.message {
  ​	border: 1px solid red;
  ​	background: #336699;
  ​	.title {
  ​	color: red; } } }

• Nested (the default setting) looks like this.

  ​	.infobox .message {
  ​	border: 1px solid red;
  ​	background: #336699; }
  ​	.infobox .message .title {
  ​	color: red; }

• Expanded looks like this.

  ​	.infobox .message {
  ​	border: 1px solid red;
  ​	background: #336699;
  ​	}
  ​	.infobox .message .title {
  ​	color: red;
  ​	}

• Compact looks like this.

  ​	.infobox .message { border: 1px solid red;
  ​	background: #336699; }
  ​	.infobox .message .title { color: red; }

  (The first declaration should be on one line.)

• Compressed looks like this.

  ​	.infobox .message{border:1px solid red;background:#336699}
  ​	.infobox .message .title{color:red}

  (The compressed output didn’t fit on one line in the book, so we had to create another one. In the real thing, though, it is all on one line.)