Pixels to Em Function6:35 with Guil Hernandez
Now we're going to write a Sass function that automatically converts pixel values to em units.
So, now we're gonna write a few SASS directives and 0:00 functions, that will help us with defining and 0:02 maintaining font sizes, line height and colour values in our project. 0:05 So in the previous video, we created this font URL Google variable, for 0:09 our Google web font URL. 0:14 So now we're gonna use this variable, to write a directive that imports the font 0:17 URL and outputs it to the CSS, only if the variable for it exists. 0:23 So, we're gonna open up the utilities.scss partial, and right below the first 0:29 comment, we're gonna use an if control directive, to say if variable-exists, 0:35 so variable-exists is a SASS introspection function, 0:43 that returns whether a variable, with a given name exists in our project. 0:49 So we're gonna check to see if the font URL Google, variable exists. 0:54 So, if the variable does exist, we're going to import, the URL for it. 1:00 So, we'll say, import URL. 1:06 Then, as the URL argument, we're gonna pass that font URL Google variable. 1:08 So, I just go ahead and copy and paste it. 1:15 So now in the work space console, I'll go ahead and 1:17 run the command SASS watch scss colon CSS and 1:21 when I hit Enter, you can see that SASS is now watching for changes in our project. 1:27 So if we bring up the CSS output, we can see up top that since the font 1:33 URL variable does indeed exist in the config.SCSS file. 1:38 The import rule is now used, to import the lado web font so now any time we need 1:43 to use a Google web font, we simply need to define the font URL Google variable. 1:49 And the value and the SASS sort of takes care of the rest. 1:55 So lately, especially in responsive web design, 1:58 it's become good practice to use relative units like ems for defining font sizes. 2:01 Now earlier, we defined our base font size and line height and 2:06 pixels, as we can see here, but we still wanna use M's for 2:11 font sizes and unitless values for line heights, so, what we'll do next is 2:16 write a commonly used function that automatically converts pixels to M's, that 2:21 way we don't have to manually calculate an M value, every time we wanna use one, 2:25 so we're gonna use that trusted, target divided by context equals result formula, 2:30 used in responsive web design, to convert pixel values to M. 2:36 So, below the, second comment here, 2:40 we'll say at function and we're gonna call our function M. 2:43 And we'll want to pass two arguments, one will be for 2:51 target and the other for context. 2:55 So inside the parentheses we'll say, target and our next argument will be 2:57 context, but we'll make the default value for context, the base font size. 3:06 This will make the content argument optional, 3:13 any time we wanna use this function. 3:15 And inside the function we'll call return, 3:19 to return the value of target, divided by context. 3:22 Then, to get that value back in M's. 3:29 We'll need to multiply it by one M. 3:31 So, now we can call the M function, any time we need a relative value in M's. 3:35 So, next we'll go over to our base styles, by clicking the base.scss partial and 3:41 as we can see I've already defined the body's font size, line height, and 3:47 font family, using some of the variables, we created earlier. 3:52 So for example, here we have base font size, base font family primary. 3:56 So to get a relative and unitless line-height value, we're using those text 4:01 config variables, to divide the base line-height, by the base font-size, 4:06 which as we can see in our CSS output, it returns a unitless value of 1.5. 4:11 So, as you can see, SASS is really great at handling units. 4:18 So, now, if we, for instance, wanna give the header, a top and 4:23 bottom padding, equivalent to 48 pixels and 4:27 M's, but we don't really wanna do any of the calculations. 4:30 Well, that's fine, because now, we have that M function to do it for us. 4:33 So in our header rule, 4:38 we can say padding, and then we'll call the M function and as the argument, 4:39 we'll pass 48 pixels and we'll make the left and right padding zero. 4:45 And right below, if we want the H1's font size to 4:51 be equivalent to 42 pixels and M's, we can say, font size. 4:54 And then use the M function and pass the value, 42 pixels. 5:00 And like we did for 5:06 the body, we can use a division operator, to return a unitless line height. 5:07 This time we need to divide the target of 46 pixels, because that's what we want 5:12 the h1 line height to be, by the h1 elements font size of 42 pixels. 5:17 Remember, the context is now the h1 elements font size of 42 pixels. 5:24 So right below, we can do the same for a margin. 5:29 So if we want a bottom margin we can say, margin bottom. 5:32 And, this time we'll, again, use the M function, 5:38 to divide our desired bottom margin by the h1's font size of 42 pixels. 5:42 So let's say, 70 pixels divided by 42 pixels. 5:47 Notice how we're only using the M function for our font size and our, 5:53 bottom margin for the line height we simply use SASS's division operator, so 5:57 right below, in our h2 rule we'll again use the M function to give our 6:02 h2's a font size in M's equivalent to, 24 pixels, so let's say, font size, 6:08 M, and as the argument, we'll pass 24 pixels. 6:13 So now when we bring up our CSS output, we can see how those functions, 6:20 return the padding, font sizes and margin values, in M's. 6:24 Again, another example of how great SASS is, at handling and calculating units. 6:29
You need to sign up for Treehouse in order to download course files.Sign up