Installing PostCSS Plugins9:19 with Guil Hernandez
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.
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 up