Preview
Video Player
00:00
00:00
CSS Output Styles
4:55Sass 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.
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