Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Introduction to PostCSS!
You have completed Introduction to PostCSS!
Preview
Learn how PostCSS processes your CSS using a powerful ecosystem of JavaScript plugins.
This video doesn't have any notes.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
PostCSS by itself doesn't
do all that much.
0:00
It's not what actually alters your CSS.
0:03
Its powerful abilities come
from its ecosystem of plugins.
0:06
PostCSS on it's own is just a tool
that you install as a node module.
0:10
After installing PostCSS,
0:14
you choose the JavaScript based plugins
you want to use for your project.
0:16
Once you install a plugin,
it's then powered by PostCSS and
0:20
becomes part of your workflow.
0:23
The PostCSS tool turns your authored CSS
0:25
into a type of data that
JavaScript can manipulate.
0:28
It then passes that data through
the plugins you've installed.
0:32
Each plugin has a specific task like
generate pixel fallbacks for rem units.
0:35
Write inline SVGs or
generate a semantic grid system.
0:40
It all depends on
the plugins you installed.
0:43
The plugins perform all
the necessary code manipulations,
0:45
then post CSS outputs the new data to
a CSS file that the browser can read.
0:48
For example,
0:54
the post CSS color function plugin
supports function to transform colors.
0:55
So let's say that you want to reduce
the alpha value of the color blue.
1:00
Well instead of defining
the full RGBA value,
1:04
wouldn't it be great if you could simply
use the keyword or hex value like this.
1:07
As I'm recording this video this color
function is not yet supported by browsers.
1:13
However, postcss can take this CSS, run
it through the color function plugin and
1:17
output an RGBA value the browser can read.
1:22
Now let's say that you want to change
the lightness of the color black.
1:26
Well that's easy too,
with a color function plugin,
1:29
you simply use black followed
by a lightness value like this.
1:32
And it will transform it into an R.G.B.
value the browser can understand.
1:36
Pretty useful, isn't it.
1:40
While post C.S.S.
1:41
is neither a preprocessor nor a post
processor, you'll find lots of post C.S.S.
1:43
plugins that could fall into either
category, because in terms of processing,
1:48
they behave like a preprocessor or
a post processor.
1:53
For instance, some preprocessor
like plug ins process variables,
1:57
logic, and unsupported syntax like
you saw with the color function.
2:01
And some plugins auto prefix your code and
optimize your CSS for
2:05
use in production as
a post processor would.
2:09
So it's difficult to classify
PostCSS as any one thing.
2:12
Because as you're about to learn, it can
have different types of functionality.
2:16
All things considered,
PostCSS, preprocessors and
2:20
post processors are all
just CSS processors.
2:24
They either transform extended CSS syntax
and features into browser friendly CSS or
2:27
apply optimization and
fallbacks to your valid CSS.
2:33
Also, the word post and
post CSS has caused confusion in lots of
2:37
discussion in the web
community about its meaning.
2:42
Post doesn't actually refer to and
2:45
has nothing to do with post
processing as one may think.
2:47
Developers who work on postCSS and
2:51
its plugin contributors have said that the
name postCSS can be thought of as meaning
2:54
CSS and beyond, because its
functionality is potentially unlimited.
2:58
All together post CSS is both the tool and
the entire ecosystem of plugins.
3:03
Up next, you'll get started
using post CSS right away and
3:08
see exactly how it transforms your CSS
using a simple tool like code pen.
3:12
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up