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
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