Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Video Player
00:00
00:00
00:00
- 2x 2x
- 1.75x 1.75x
- 1.5x 1.5x
- 1.25x 1.25x
- 1.1x 1.1x
- 1x 1x
- 0.75x 0.75x
- 0.5x 0.5x
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