PostCSS plugins offer a wide variety of syntax extensions.

Some even provide Sass like syntax.

With the language extension plugins,

you're able to nest selectors, use variables, create mix ins and

extends, even import partials, just like you would with Sass.

In other words, PostCSS could do enough of what Sass offers that it could be your go

to styling method.

And since the plugins are written in JavaScript,

your CSS is processed faster than Ruby Sass and LibSass even.

So, if you're working with a large CSS file,

that speed can make a big difference in your bill times.

The PreCSS plugin pack combines all the plugins that use Sass like syntax and

features into one plugin, so you don't have to manually install each one.

Now, I'm not gonna cover the language extension plugins in this workshop,

but now that you know how to install and run a plugin, you can try them out for

yourself later.

No matter what plugins you use or which features and syntax, ultimately,

what's most important is the final CSS output you serve the browser.

PostCSS plugins also offer an easy way to optimize your CSS for production.

The output CSS currently displays all the comments and spaces.

And the CSS rules are fully expanded,

which can be helpful when debugging in development.

But it's best not to deploy your CSS to production this way, since every line,

space, and comment can make the file size larger than it needs to be,

especially if this was a big project.

So you can optimize your build file for production by stripping out

all the comments and spaces and compressing the CSS to one line.

This process is called minification.

So the plugin I'm going to install to optimize my CSS is called cssnano.

In the terminal, I'll install the cssnano plugin as a dev dependency

by typing npm install --save-dev, followed by cssnano.

Then I'll require cssnano in my gulp file.

And like the rest of our plugins, I'll add cssnano to the processor's array.

I'll save my gulp file, bring up the terminal, and

run gulp to start the watcher.

And now when you save your source CSS, cssnano minifies your CSS

to make the final CSS as small as possible for your production environment.

So now the entire style sheet is compressed to one line.

cssnano also removes empty rules and declarations.

It converts longhand properties into the shorthand.

And it shortens hex values to three digits, wherever possible.

cssnano will even output the smallest CSS representation of a color value.

For example, if you define the hex value for

the color red, so let's say #ff0000.

It will output the actual keyword value red because

the word red is shorter than ff0000, creating less output.

We've just barely scratched the surface of the PostCSS plugin ecosystem.

Hopefully now you're more curious and excited about its possibilities.

In this workshop, you learned that PostCSS is a different approach

to writing CSS because it's not limited to any one type of functionality.

You can customize and configure PostCSS to align it with the way you like to work.

And it can help solve problems that other tools like CSS preprocessors may

not be able to solve yet.

You can even build your own solutions to problems by building a custom plugin and

sharing it with the developers in the PostCSS community.

So be sure to check the teachers' notes for resources on plugin development and

the latest in PostCSS.

Thanks everyone.