Convert Pixels to Rems5:02 with Guil Hernandez
In this video, you'll learn about a simple PostCSS plugin that converts pixel values to rem values.
In this video, I'll teach you about a PostCSS plugin that helps keep your 0:00 typography and layout flexible by converting pixel values to rem values. 0:04 Rem, or root is a flexible CSS unit 0:10 that's always relative to the font size of the root element of the page. 0:13 Usually it's the HTML element. 0:18 For many it's easier to think in pixels, so when designing and 0:20 prototyping it can be faster to write your CSS using pixels. 0:23 However, rem values make your layouts more flexible and 0:27 they are a preferred approach for many developers. 0:31 But using rems does require some math on your part, but PostCSS can do the math for 0:33 you so you can design with pixels but use rems in production. 0:38 Back in my terminal I'll install the pxtorem 0:42 plugin as a dev dependency by typing npm install 0:48 --save-dev followed by postcss-pxtorem. 0:54 Once the plugin installs all required 1:03 in my gulpfile by typing var pixtoram 1:09 = require('postcss-pixtorem'). 1:14 And I'll enable the plug in by adding the pxtorem variable to the processors array. 1:19 I'll save my gulpfile then I'll type the gulp command 1:30 in the terminal to run my latest changes. 1:35 So now I'm able to define flexible font sizes, margins, 1:38 and padding and rem units while thinking in terms of pixels. 1:41 So first, I'll grab this h1 rule here from my CSS next example, 1:46 I'll paste it below the pxtorem comment. 1:52 So usually in a CSS preprocessor like SASS, you'll create a function with logic 1:56 that converts pixels to rems, then you'll use that function in place of your values. 2:02 Well the pxtorem post CSS plugin does all the pixel to rem calculations for you. 2:08 You simply use pixel values. 2:14 So, for instance, in the h1 rule, I'll add a font-size property 2:16 of 60px and if I open up my output CSS and just like that, 2:22 you'll see that the plug in converts the fixed pixel value to a flexible rem value. 2:27 Now with the default plugin settings only font related properties 2:33 like font and font size are converted to rems. 2:38 So if I add a bottom margin of say 40px, once I hit save, 2:44 you can see that the plugin does not convert the value here to rem. 2:51 Now most PostCSS plugins offer configuration options that 2:58 extend their functionality. 3:02 So be sure to always read a plug as documentation when using it 3:05 in your project. 3:09 The pics to run docs show that you can use configuration options to set the root 3:10 font size, define exactly which properties should change from pixels to ram, even add 3:16 pixel fall backs for older browsers that don't support rams like IE eight and more. 3:22 So back in my gulpfile in the processors array, 3:28 I'll pass some of these config options to pxtorem. 3:32 Now you pass options to a plugin via an object. 3:36 With the propWhiteList option you control exactly which 3:43 properties change from pixels to rem. 3:48 To enable all properties, set its value to an empty array. 3:52 I'll save my gulpfile and in my terminal, I'll press Ctrl+C to stop the watcher. 3:57 Then type the gulp command to run my latest gulpfile changes. 4:04 And now I can define pixel values for any properties. 4:10 So for example, right below the margin bottom property, 4:13 I'll say letter-spacing: 1px. 4:17 And over in the output notice how they all get converted to rems. 4:21 And you can even convert your media query breakpoints to rems 4:28 by passing the mediaQuery option and setting it to true. 4:32 So I'll save these changes. 4:36 Bring up the terminal. 4:39 Hit Ctrl+C. 4:40 Then type gulp again to run my latest changes. 4:42 Now if I go over to my source CSS and 4:47 simply save it when I bring up the output CSS you can see that the media 4:49 query breakpoint range is now defined in rem units instead of pixels. 4:54
You need to sign up for Treehouse in order to download course files.Sign up