Getting Started with PostCSS5:06 with Guil Hernandez
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.
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 up