Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

CSS Output Styles

4:55 with Guil Hernandez

Sass gives us the option to compress and compact our style sheets to make our websites load faster. In this video, we'll go over the four CSS output styles.

Quick Reference

nested 

sass --watch scss:css --style nested

The default output style. It reflects the structure of the CSS styles and the HTML document. Each property has its own line, and rules are indented based on how deep they're nested in the original Sass code.

expanded 

sass --watch scss:css --style expanded

Similar to the nested style. It looks more like the CSS we'd write in a regular style sheet. Each property and rule takes up one line and properties are indented within the rules.

compressed 

sass --watch scss:css --style compressed

Minifies our CSS output by stripping out comments and unnecessary spaces. It compresses CSS to one line. The most optimized output style – use before uploading your CSS to the server.

compact 

sass --watch scss:css --style compact

Another optimized format that draws the focus to the CSS selectors instead of the properties. Each CSS rule takes up one line, with all properties defined on the same line.

Even though the default CSS Sass outputs is nicely organized and 0:00
usually follows the structure of our document, 0:05
Sass also supports several other CSS output formats. 0:08
But before we take a look at all the output options, it's super important 0:13
to keep in mind that we shouldn't edit anything in our CSS output. 0:17
As Sass developers, it's our job to keep the authored Sass or 0:22
scss stylesheets nicely organized and maintainable. 0:26
And if our CSS output repeats values and declarations here and 0:30
there, it's not a big deal, because the output is for the browser to read anyway. 0:34
Think of the CSS output as machine code for the browser. 0:38
While the authored Sass is the human readable code, for us. 0:42
Because of that, we have the option to compress and 0:47
compact our stylesheets, to make our websites load faster. 0:50
So let's go over the output options. 0:54
So, the four output option styles we have our nested, compressed, 0:57
compact, and expanded. 1:02
And by default, Sass outputs the nested styles. 1:04
And this is what we're seeing now in our application.css file. 1:08
Nested is a good format to use during development, 1:12
because it reflects the structure of the CSS styles, and the HTML document. 1:15
So if we need to check on our output, 1:20
it's easy to understand since each property has its own line and 1:22
rules are indented based on how deep they're nested in the original Sass code. 1:26
So to change our output style, we can start by going down to the workspace 1:32
console and typing the Sass watch command. 1:36
So let's type sass watch scss:css. 1:39
[SOUND] Then, we will need to use the style flag. 1:46
So let's type --style, followed by one of the four output styles. 1:49
So first, let's take a look at expanded. 1:55
[SOUND] So now we will need to go back to our Sass, and 1:57
recompile it to check out our new output style. 2:03
So, expanded is a lot like nested, as we can see here. 2:08
The difference is it looks more like the normal CSS we'd 2:13
write in a regular stylesheet. 2:17
As you can see, properties are indented with an each rule. 2:18
So, there's nothing really fancy going on. 2:22
So, let's take a look at a couple more output styles. 2:25
So, I'll go back to the console and type Ctrl+C to stop the Sass watcher, 2:28
then I'll hit the up arrow key and this brings up the last command we typed. 2:35
So, this time, we're going to replace expanded with compressed. 2:40
[SOUND] So when we use the compressed output style, 2:45
it actually minifies our CSS. 2:50
So as we can see, it optimizes our CSS output for production by stripping out 2:54
any comments and unnecessary spaces and compressing the CSS to one line. 2:59
And what's also pretty neat is that in the compressed output mode, 3:04
Sass will output the smallest CSS representation of a color value. 3:08
So, for example, HEX values are shortened to three digits wherever possible. 3:13
Or, if we define the HEX value for, say, the CSS color red. 3:18
When compressed, it will actually output the keyword value red instead, 3:23
not the HEX value since the word red is shorter and creates less output. 3:27
So let's go back to the console and once again, 3:34
we'll hit Ctrl+C to stop the Sass watcher. 3:39
And we're going to hit the up arrow key again to bring up the last command we 3:43
typed, and this time, we're going to replace compressed with compact. 3:48
[SOUND] So, back in our output CSS, 3:52
we can see how the compact style is another 3:56
optimized format that draws the focus to the CSS 4:01
selectors, instead of the properties. 4:07
As we can see, each CSS rule takes up one line, 4:11
with all the properties defined on the same line. 4:14
So each output option has its use, but out of the four, 4:18
I'd recommend using the compressed style when uploading 4:22
your CSS to the server, since it's the most optimized format. 4:26
[SOUND] That way, our site loads as fast as possible to the end user. 4:31
And while we're on the subject, since the browser can only read CSS, 4:37
not Sass or scss, when our site goes up on the server, 4:42
we don't need to upload all the authored Sass files. 4:46
Only the application.css file should go up on the server. 4:50

You need to sign up for Treehouse in order to download course files.

Sign up