1
00:00:00,235 --> 00:00:04,830
PostCSS plugins offer a wide
variety of syntax extensions.

2
00:00:04,830 --> 00:00:06,476
Some even provide Sass like syntax.

3
00:00:06,476 --> 00:00:09,218
With the language extension plugins,

4
00:00:09,218 --> 00:00:13,953
you're able to nest selectors,
use variables, create mix ins and

5
00:00:13,953 --> 00:00:19,040
extends, even import partials,
just like you would with Sass.

6
00:00:19,040 --> 00:00:23,751
In other words, PostCSS could do enough of
what Sass offers that it could be your go

7
00:00:23,751 --> 00:00:24,926
to styling method.

8
00:00:24,926 --> 00:00:28,598
And since the plugins
are written in JavaScript,

9
00:00:28,598 --> 00:00:33,160
your CSS is processed faster
than Ruby Sass and LibSass even.

10
00:00:33,160 --> 00:00:34,750
So, if you're working
with a large CSS file,

11
00:00:34,750 --> 00:00:38,280
that speed can make a big
difference in your bill times.

12
00:00:38,280 --> 00:00:43,890
The PreCSS plugin pack combines all
the plugins that use Sass like syntax and

13
00:00:43,890 --> 00:00:49,310
features into one plugin, so you don't
have to manually install each one.

14
00:00:49,310 --> 00:00:52,980
Now, I'm not gonna cover the language
extension plugins in this workshop,

15
00:00:52,980 --> 00:00:56,470
but now that you know how to install and
run a plugin, you can try them out for

16
00:00:56,470 --> 00:00:57,250
yourself later.

17
00:00:58,540 --> 00:01:02,830
No matter what plugins you use or
which features and syntax, ultimately,

18
00:01:02,830 --> 00:01:07,565
what's most important is the final
CSS output you serve the browser.

19
00:01:07,565 --> 00:01:13,270
PostCSS plugins also offer an easy way
to optimize your CSS for production.

20
00:01:13,270 --> 00:01:18,270
The output CSS currently displays
all the comments and spaces.

21
00:01:18,270 --> 00:01:21,400
And the CSS rules are fully expanded,

22
00:01:21,400 --> 00:01:24,170
which can be helpful when
debugging in development.

23
00:01:24,170 --> 00:01:29,160
But it's best not to deploy your CSS to
production this way, since every line,

24
00:01:29,160 --> 00:01:33,930
space, and comment can make the file
size larger than it needs to be,

25
00:01:33,930 --> 00:01:36,560
especially if this was a big project.

26
00:01:36,560 --> 00:01:40,660
So you can optimize your build file for
production by stripping out

27
00:01:40,660 --> 00:01:45,140
all the comments and spaces and
compressing the CSS to one line.

28
00:01:45,140 --> 00:01:47,168
This process is called minification.

29
00:01:47,168 --> 00:01:52,720
So the plugin I'm going to install to
optimize my CSS is called cssnano.

30
00:01:54,340 --> 00:02:00,020
In the terminal, I'll install
the cssnano plugin as a dev dependency

31
00:02:00,020 --> 00:02:05,040
by typing npm install --save-dev,
followed by cssnano.

32
00:02:10,951 --> 00:02:14,151
Then I'll require cssnano in my gulp file.

33
00:02:22,272 --> 00:02:28,232
And like the rest of our plugins,
I'll add cssnano to the processor's array.

34
00:02:32,432 --> 00:02:36,555
I'll save my gulp file,
bring up the terminal, and

35
00:02:36,555 --> 00:02:39,000
run gulp to start the watcher.

36
00:02:40,780 --> 00:02:47,140
And now when you save your source CSS,
cssnano minifies your CSS

37
00:02:47,140 --> 00:02:52,610
to make the final CSS as small as
possible for your production environment.

38
00:02:52,610 --> 00:02:57,870
So now the entire style sheet
is compressed to one line.

39
00:02:57,870 --> 00:03:01,752
cssnano also removes empty rules and
declarations.

40
00:03:01,752 --> 00:03:05,552
It converts longhand
properties into the shorthand.

41
00:03:05,552 --> 00:03:11,225
And it shortens hex values to
three digits, wherever possible.

42
00:03:11,225 --> 00:03:16,830
cssnano will even output the smallest
CSS representation of a color value.

43
00:03:16,830 --> 00:03:21,775
For example,
if you define the hex value for

44
00:03:21,775 --> 00:03:26,864
the color red, so let's say #ff0000.

45
00:03:26,864 --> 00:03:32,402
It will output the actual
keyword value red because

46
00:03:32,402 --> 00:03:39,504
the word red is shorter than ff0000,
creating less output.

47
00:03:43,086 --> 00:03:47,330
We've just barely scratched the surface
of the PostCSS plugin ecosystem.

48
00:03:47,330 --> 00:03:50,300
Hopefully now you're more curious and
excited about its possibilities.

49
00:03:50,300 --> 00:03:53,953
In this workshop, you learned that
PostCSS is a different approach

50
00:03:53,953 --> 00:03:58,005
to writing CSS because it's not limited
to any one type of functionality.

51
00:03:58,005 --> 00:04:03,270
You can customize and configure PostCSS to
align it with the way you like to work.

52
00:04:03,270 --> 00:04:07,160
And it can help solve problems that
other tools like CSS preprocessors may

53
00:04:07,160 --> 00:04:09,020
not be able to solve yet.

54
00:04:09,020 --> 00:04:13,570
You can even build your own solutions to
problems by building a custom plugin and

55
00:04:13,570 --> 00:04:16,510
sharing it with the developers
in the PostCSS community.

56
00:04:16,510 --> 00:04:20,220
So be sure to check the teachers' notes
for resources on plugin development and

57
00:04:20,220 --> 00:04:22,170
the latest in PostCSS.

58
00:04:22,170 --> 00:04:22,720
Thanks everyone.