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
Start a free Courses trial
to watch this video
If you're new to PostCSS and want to try it out without having to install Node.js, npm or a build tool, the easiest way to start using PostCSS is via CodePen.
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
If you're new to PostCSS and
0:00
want to try it out without having
to install node NPN or a bill tool.
0:02
The quickest and easiest way to
start using PostCSS is via code pen.
0:06
If you don't have a code pen account,
0:10
you can sign up for
a free account at codepen.io.
0:11
So I'll start by creating a new pen and
to add PostCSS and the available plugins.
0:15
Open the pen settings dialog
here in the editor view
0:20
by clicking either the gear icon in
the top left corner of the CSS window, or
0:24
the settings button in the top menu.
0:29
Just make sure that you're
in the CSS settings.
0:31
Next I'm going to select post CSS from
the CSS preprocessor drop down menu.
0:35
Selecting post CSS immediately
brings up the need an add-on button.
0:41
Click the button, and you'll see the list
of post CSS plugins Code Pen supports.
0:45
Currently there are 12 plugins, so plugins
like CSS Next let you use the latest
0:51
CSS features and syntax today, and you'll
learn more about those in a later video.
0:56
With the simple-vars plugin, you can use
SAS-like variables in your style sheet or
1:00
remove all of your CSS comments with
a plugin like discard-comments and more.
1:06
Now one plugin I really
like is transform-shortcut,
1:11
which allows you to use shorthand
transform properties in your CSS.
1:15
Now there are hundreds of other
plugins available for PostCSS.
1:19
CodePen only offers a few of the most
common ones you might use on a project.
1:23
And to add a plugin to your pen simply
click the add button for that plugin.
1:27
So first, I'm going to add the transform
shortcut plugin by clicking add,
1:31
then the save and
close button at the bottom, and
1:37
if you see the at USE rule at
the top of your C.S.S. panel.
1:41
Then you're all set to
start using the plugin.
1:45
So with transforms shortcut, you can use
shorthand C.S.S. transform properties.
1:49
Currently transform shorthand properties
are part of the future C.S.S.
1:54
transforms W3C spec, and
they're not supported by browsers.
1:58
But with this postCSS,
2:02
you can take advantage of that
short hand feature today.
2:04
And as you'll see it's incredibly handy.
2:08
So normally to create a CSS transform,
you need to write the transform property
2:11
then define the transform function and
value.
2:16
So if for example,
here were giving box a translate 3-D
2:19
of one hundred pixels on the x-axis and
50 pixels on the y-axis.
2:23
But with the transform short cut plug in,
2:28
you can simply type translate
followed by the values.
2:31
So we'll say, 100 pixels and 50 pixels.
2:34
And when you click the view compile
button, you'll see that it outputs
2:38
the proper transform property and
the translate3d function and values.
2:43
Pretty neat.
2:48
And you can even write multiple
transform properties in a rule.
2:49
So, for example, in addition to translate,
you can add a scale property, and
2:53
it'll set the value to 2 and 2, so
that the box scales by 2 on the X and
2:58
Y axis, and when we click the view
compile button you can see
3:04
that the plugin combines
the transforms into one declaration.
3:09
So pretty cool stuff.
3:14
Another useful plugin,
is post CSS media min max,
3:16
which gives you access
to the new syntax and
3:21
features that will be available in the
CSS Media Queries Level 4 specification.
3:23
So back in my pen settings panel, I'll
add the post CSS media min max plugin.
3:28
By clicking add, then save and close.
3:37
So when building responsive sites,
you'll usually define a breakpoint range
3:43
using the min width and
max width media features.
3:48
For example, here we're defining
a breakpoint range with a min width of
3:52
768 pixels and a max width of 1024 pixels.
3:57
But with the postcss
media min max plug in,
4:02
you don't need to write
the full media features.
4:06
You can simply write 768 pixels
4:09
less than or equal to width less than or
equal to 1024 Pixels.
4:16
So this statement means that width is
greater than or equal to 768 pixels and
4:20
is less than or equal to 1024 pixels.
4:28
And when you click the view compiled
button, notice how it outputs the standard
4:32
media query rule with the minWidth and
maxWidth media features.
4:37
I've posted links to the documentation for
the transform shortcut and
4:42
media create plugins, and
the teachers notes of this video,
4:46
if you want to keep experimenting
with these on your own.
4:49
Now that you've seen how PostCSS powered
plugins can help you work faster and
4:53
smarter, you're ready to learn how to
install a news PostCSS in your projects.
4:57
So, up next you'll quickly get up and
5:01
running with the PostCSS
using the gulp build system
5:02
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