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
Once you install PostCSS, it's simple to harness the powers of the plugin ecosystem. In this video, you'll learn the benefits of using a modular plugin approach.
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
In PostCSS, it's all about the plugins.
0:00
As I'm recording this video, PostCSS
has over 200 community plugins you can
0:03
install to enable features like future
CSS syntax, shortcuts, even tools and
0:07
extensions of the CSS language.
0:12
Now that you have PostCSS
set up with Gulp,
0:15
it's simple to harness the powers
of the plugin ecosystem.
0:17
So coming up in the next videos,
0:20
you'll see some of the benefits of
using a modular plugin approach.
0:22
PostCSS's biggest strength
is that you decide for
0:26
yourself which plugins you want to use.
0:29
So you just add the features
that you need in your workflow.
0:31
A quick way to search and view the
available PostCSS plugins is by visiting
0:35
postcss.org and
clicking the plugins link in the main nav,
0:40
which takes you to a searchable
catalog of PostCSS plugins.
0:44
You can also check out the plugins
section of the PostCSS docs on GitHub
0:49
by clicking Docs, then plugin.md.
0:53
Both the searchable catalog and
0:58
GitHub docs split up all
the plugins into categories.
1:00
For example, Packs combine multiple
plugins to enable more than
1:04
one feature like optimize CSS for
production,
1:09
use new CSS syntax and features,
even use SAS like CSS.
1:12
Below the Packs you'll find hundreds
of other plugins that support one
1:17
specific feature or do just one thing.
1:21
For instance to use only one of
the Future CSS Syntax features choose and
1:24
install the one you want from this list.
1:29
To add CSS fallbacks for
1:31
older browsers find the features
you need under Fallbacks.
1:33
You also have plugins for
language extensions, colors, images,
1:36
grids, shortcuts, and so much more.
1:41
So we'll start by installing
the cssnext plugin, listed under packs.
1:44
When you click the provided link it
takes you to the plugins documentation.
1:51
As you can see cssnext lets you
use tomorrow's CSS syntax, today.
1:56
It transforms new CSS specs into
compatible CSS the browser can read.
2:01
So let's see how it works.
2:07
You install a post CSS
plugin as a dev dependency
2:08
because it's specific to
the project you're working on.
2:11
So I'll bring up my terminal and
2:15
install cssnext by writing
the command npm install
2:18
--save-dev followed by postcss-cssnext.
2:24
Once it installs you'll need to require
the cssnext plugin in your gulpfile.
2:39
So right below the plugins
comment say var cssnext =
2:44
require('postcss-cssnext');.
2:50
To enable the plugin simply
include the cssnext variable
2:59
inside the processors array.
3:04
This is what instructs PostCSS to run your
source CSS through the cssnext plugin.
3:11
All right that's all there is to it.
3:18
Now I'll save my gulpfile,
bring up my terminal, and
3:20
type the Gulp command to run
my latest Gulp file changes.
3:23
So now I can start using
the cssnext features in my project.
3:29
For instance, the color function you
learned about in an earlier video,
3:34
is included in cssnext.
3:39
So here in style.css, I'll create a simple
hover rule and add a color property.
3:43
So now to reduce the alpha
of the color steel blue,
3:53
I can simply define a color function,
then say steel blue,
3:58
a for Alpha, and
we'll take the alpha value down to 80%.
4:04
So now if I open up the stylesheet
inside the destination folder,
4:10
you'll see that the plugin transformed
the color function into an rgba value.
4:16
And it also converts hex values to rgba.
4:25
So if I use the hex value for
steel blue instead,
4:28
so let's say #4682b4.
4:34
The CSS output is the same.
4:42
The cssnext to plug in also
gives you access to the media
4:45
min max feature we used
earlier with code pin.
4:50
You can define a media query range
using the less than or equal to and
4:54
the greater than or equal to operators.
4:58
So for
example in my source CSS If I use that
5:01
new syntax in my stylesheet
by typing @media
5:07
(768px <= width <= 1024px) and
5:12
inside the media query
I'll add a quick rule,
5:18
let's say .container max-width: 1024 px.
5:24
Once I save my latest changes, you can
see that the plug in outputs a standard
5:34
media query using the min-width and
max-width media features.
5:39
Great.
5:43
Other awesome future CSS
features you can use now with
5:46
cssnext are custom properties and
the var function.
5:50
These let you define your own custom
properties and assigned values to them.
5:55
And the values can be reused throughout
your style sheet, like variables.
5:59
It's common practice to declare custom
properties on the root element,
6:04
because it makes the properties accessible
to all selectors in your style sheet.
6:09
So first I'll create a new rule
using the root pseudo class.
6:13
And you create a custom
property using two dashes
6:20
followed by a property name,
which can be any name you want.
6:24
So I create a property named --color-prim,
6:28
for color primary, and I'll set
6:34
the value to the hex value b22222.
6:38
And I'll create a second property
using the two dashes, and
6:43
I'll name it color-sec,
for color secondary, and
6:48
I'll set this value to steelblue.
6:52
So now to reference a custom
properties value in a CSS declaration,
6:57
you use the var function.
7:02
So, for instance, right below
I'll create a rule that targets
7:04
an h1 and I'll set its color
with the color property.
7:09
And then I'll use the var function and
7:13
set it to the value of the color
prime custom property.
7:16
Once I save my source CSS and
check out the output,
7:23
notice how it returns the value
of that color prime property.
7:27
Cool, and I can use this value
anywhere in my style sheet now.
7:32
So for instance if I create
a new rule under the h1,
7:37
let's say a rule that
targets the class highlight.
7:40
And lets add a background property.
7:46
Then I'll use the var function to set
the background color to the value of
7:50
color-prime.
7:54
And right below that,
I'll add a border property.
7:55
So that's a solid 1px.
8:01
And for the border color,
8:07
I'll use the bar function to set
the color to the value of color-set.
8:08
And what's great is that you
can use the var function
8:19
in place of any part of a CSS value.
8:22
So for instance, instead of using a hex
value and the color function here,
8:25
I can replace it with var then define
8:31
the property --color-sec.
8:35
And it returns the same
color value as before.
8:41
So the cssnext plugin pack combines
many of the future CSS syntax plugins.
8:45
Like postcss-color-function,
postcss-custom-properties,
8:52
postcss-media minmax and
more into one plugin, so
8:56
that you don't have to
install them individually.
9:00
Now if you don't want to install the full
plugin pack, you can always install and
9:03
run any of these plugins in your gulpfile.
9:07
Just like you did earlier with cssnext.
9:10
Be sure to check out the resources
I posted in the teacher's notes,
9:13
to learn more about
these new CSS features.
9:16
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