CSS Output Styles

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