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
PostCSS is a tool for transforming CSS with JavaScript. Once you install PostCSS, you can choose from hundreds of JavaScript-based plugins that transform your CSS to add powerful features and functionality.
Related courses
Resources
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
[MUSIC]
0:00
Hey, everyone I'm Guil, a friend and
teacher here at Treehouse.
0:04
If you write a lot of CSS,
you may have heard about PostCSS.
0:08
A popular processing tool for
styling your websites and applications.
0:12
In this workshop you'll get
up to speed with PostCSS.
0:16
You'll learn what PostCSS is and
what it isn't.
0:19
I'll show you a few examples of how
PostCSS works, then you'll install and
0:22
add PostCSS to your front end workflow
using a built tool like Gulp.
0:26
After that you'll learn about the custom
plugins PostCSS uses to style your pages.
0:31
This workshop assumes you have basic
knowledge of NodeJS, NPM, and Gulp.
0:36
You can brush up on those
topics by taking the courses
0:41
listed in the teacher's
notes of this video.
0:43
Let's get started.
0:46
If you've worked with a CSS
preprocessor like SASS or LESS,
0:48
you know that a CSS preprocessor takes a
special non-browser compatible syntax and
0:52
translate or transpose it into plain
CSS the browser can understand.
0:58
Now a CSS post-processor
applies changes to standard CSS
1:03
after you've written it or
after it's been compiled by SASS or LESS.
1:08
A post processor doesn't use a special
syntax like SASS or LESS does, for
1:13
example a CSS post-processor can
1:18
automatically add vendor prefixes
to CSS properties that need them.
1:21
PostCSS is a tool for
transforming CSS with JavaScript.
1:25
It's a different approach
to styling web pages.
1:29
PostCSS relies on an ecosystem
of custom JavaScript
1:32
plugins written by developers
in the JavaScript community.
1:36
As you'll learn in a later video,
once you install PostCSS and add it
1:39
to your front-end workflow, you can choose
from hundreds of plugins that transform
1:43
your CSS to add powerful features and
functions, even language extensions.
1:47
CSS preprocessors like SASS and
LESS are monolithic, meaning they include
1:52
every single feature in one large,
centrally maintained code base.
1:57
So the code you write needs to be in
line with the chosen pre-processor's
2:01
code base and standards.
2:05
SASS and LESS are also one big answer
to a subset of CSS problems, so
2:06
they come with more features than you'll
probably use or need on a given project.
2:11
And you also need to wait for new version
releases to install new features.
2:16
PostCSS is incredibly flexible.
2:20
With PostCSS you have total control
over the features and functionality.
2:23
You pick and choose which features
you want for your project.
2:27
You add as many or as few plugins
as you'd like to your workflow.
2:30
For example you can install plugins
that convert pixel units to rem units,
2:34
create and display SVG sprites, or plugins
that let you write CSS using SASS like
2:39
variables mixins and nested selectors.
2:43
Even use future CSS features now with
plugins that transform new CSS specs
2:46
in to compatible CSS, so you don't
need to wait for browser support.
2:51
This will all start to make sense in
a later video when we install and
2:56
test a few popular PostCSS plugins.
3:00
So, it's an exciting time to
be learning about PostCSS.
3:02
It's a tool that's been downloaded
by developers over 17 million times
3:05
just this year.
3:10
And popular services and industry
leaders like Google, Wikipedia, and
3:11
WordPress are using PostCSS
in their front end workflow.
3:14
In the next video, you'll learn how
PostCSS transform your CSS plugins,
3:19
then you'll see examples
of plugins in action.
3:23
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