Even though the default CSS Sass outputs is nicely organized and

usually follows the structure of our document,

Sass also supports several other CSS output formats.

But before we take a look at all the output options, it's super important

to keep in mind that we shouldn't edit anything in our CSS output.

As Sass developers, it's our job to keep the authored Sass or

scss stylesheets nicely organized and maintainable.

And if our CSS output repeats values and declarations here and

there, it's not a big deal, because the output is for the browser to read anyway.

Think of the CSS output as machine code for the browser.

While the authored Sass is the human readable code, for us.

Because of that, we have the option to compress and

compact our stylesheets, to make our websites load faster.

So let's go over the output options.

So, the four output option styles we have our nested, compressed,

compact, and expanded.

And by default, Sass outputs the nested styles.

And this is what we're seeing now in our application.css file.

Nested is a good format to use during development,

because it reflects the structure of the CSS styles, and the HTML document.

So if we need to check on our output,

it's easy to understand since each property has its own line and

rules are indented based on how deep they're nested in the original Sass code.

So to change our output style, we can start by going down to the workspace

console and typing the Sass watch command.

So let's type sass watch scss:css.

[SOUND] Then, we will need to use the style flag.

So let's type --style, followed by one of the four output styles.

So first, let's take a look at expanded.

[SOUND] So now we will need to go back to our Sass, and

recompile it to check out our new output style.

So, expanded is a lot like nested, as we can see here.

The difference is it looks more like the normal CSS we'd

write in a regular stylesheet.

As you can see, properties are indented with an each rule.

So, there's nothing really fancy going on.

So, let's take a look at a couple more output styles.

So, I'll go back to the console and type Ctrl+C to stop the Sass watcher,

then I'll hit the up arrow key and this brings up the last command we typed.

So, this time, we're going to replace expanded with compressed.

[SOUND] So when we use the compressed output style,

it actually minifies our CSS.

So as we can see, it optimizes our CSS output for production by stripping out

any comments and unnecessary spaces and compressing the CSS to one line.

And what's also pretty neat is that in the compressed output mode,

Sass will output the smallest CSS representation of a color value.

So, for example, HEX values are shortened to three digits wherever possible.

Or, if we define the HEX value for, say, the CSS color red.

When compressed, it will actually output the keyword value red instead,

not the HEX value since the word red is shorter and creates less output.

So let's go back to the console and once again,

we'll hit Ctrl+C to stop the Sass watcher.

And we're going to hit the up arrow key again to bring up the last command we

typed, and this time, we're going to replace compressed with compact.

[SOUND] So, back in our output CSS,

we can see how the compact style is another

optimized format that draws the focus to the CSS

selectors, instead of the properties.

As we can see, each CSS rule takes up one line,

with all the properties defined on the same line.

So each output option has its use, but out of the four,

I'd recommend using the compressed style when uploading

your CSS to the server, since it's the most optimized format.

[SOUND] That way, our site loads as fast as possible to the end user.

And while we're on the subject, since the browser can only read CSS,

not Sass or scss, when our site goes up on the server,

we don't need to upload all the authored Sass files.

Only the application.css file should go up on the server.