1 00:00:00,220 --> 00:00:02,760 So, now we're gonna write a few SASS directives and 2 00:00:02,760 --> 00:00:05,230 functions, that will help us with defining and 3 00:00:05,230 --> 00:00:09,580 maintaining font sizes, line height and colour values in our project. 4 00:00:09,580 --> 00:00:14,860 So in the previous video, we created this font URL Google variable, for 5 00:00:14,860 --> 00:00:17,400 our Google web font URL. 6 00:00:17,400 --> 00:00:23,350 So now we're gonna use this variable, to write a directive that imports the font 7 00:00:23,350 --> 00:00:29,570 URL and outputs it to the CSS, only if the variable for it exists. 8 00:00:29,570 --> 00:00:35,830 So, we're gonna open up the utilities.scss partial, and right below the first 9 00:00:35,830 --> 00:00:43,682 comment, we're gonna use an if control directive, to say if variable-exists, 10 00:00:43,682 --> 00:00:49,210 so variable-exists is a SASS introspection function, 11 00:00:49,210 --> 00:00:54,920 that returns whether a variable, with a given name exists in our project. 12 00:00:54,920 --> 00:01:00,630 So we're gonna check to see if the font URL Google, variable exists. 13 00:01:00,630 --> 00:01:06,100 So, if the variable does exist, we're going to import, the URL for it. 14 00:01:06,100 --> 00:01:08,800 So, we'll say, import URL. 15 00:01:08,800 --> 00:01:15,220 Then, as the URL argument, we're gonna pass that font URL Google variable. 16 00:01:15,220 --> 00:01:17,230 So, I just go ahead and copy and paste it. 17 00:01:17,230 --> 00:01:21,100 So now in the work space console, I'll go ahead and 18 00:01:21,100 --> 00:01:27,970 run the command SASS watch scss colon CSS and 19 00:01:27,970 --> 00:01:32,540 when I hit Enter, you can see that SASS is now watching for changes in our project. 20 00:01:33,620 --> 00:01:38,650 So if we bring up the CSS output, we can see up top that since the font 21 00:01:38,650 --> 00:01:43,470 URL variable does indeed exist in the config.SCSS file. 22 00:01:43,470 --> 00:01:49,670 The import rule is now used, to import the lado web font so now any time we need 23 00:01:49,670 --> 00:01:55,060 to use a Google web font, we simply need to define the font URL Google variable. 24 00:01:55,060 --> 00:01:58,700 And the value and the SASS sort of takes care of the rest. 25 00:01:58,700 --> 00:02:01,660 So lately, especially in responsive web design, 26 00:02:01,660 --> 00:02:06,740 it's become good practice to use relative units like ems for defining font sizes. 27 00:02:06,740 --> 00:02:11,740 Now earlier, we defined our base font size and line height and 28 00:02:11,740 --> 00:02:16,080 pixels, as we can see here, but we still wanna use M's for 29 00:02:16,080 --> 00:02:21,310 font sizes and unitless values for line heights, so, what we'll do next is 30 00:02:21,310 --> 00:02:25,850 write a commonly used function that automatically converts pixels to M's, that 31 00:02:25,850 --> 00:02:30,630 way we don't have to manually calculate an M value, every time we wanna use one, 32 00:02:30,630 --> 00:02:36,310 so we're gonna use that trusted, target divided by context equals result formula, 33 00:02:36,310 --> 00:02:40,370 used in responsive web design, to convert pixel values to M. 34 00:02:40,370 --> 00:02:43,110 So, below the, second comment here, 35 00:02:43,110 --> 00:02:48,760 we'll say at function and we're gonna call our function M. 36 00:02:51,960 --> 00:02:55,310 And we'll want to pass two arguments, one will be for 37 00:02:55,310 --> 00:02:57,980 target and the other for context. 38 00:02:57,980 --> 00:03:05,010 So inside the parentheses we'll say, target and our next argument will be 39 00:03:06,360 --> 00:03:13,180 context, but we'll make the default value for context, the base font size. 40 00:03:13,180 --> 00:03:15,683 This will make the content argument optional, 41 00:03:15,683 --> 00:03:17,630 any time we wanna use this function. 42 00:03:19,930 --> 00:03:22,900 And inside the function we'll call return, 43 00:03:22,900 --> 00:03:29,160 to return the value of target, divided by context. 44 00:03:29,160 --> 00:03:31,910 Then, to get that value back in M's. 45 00:03:31,910 --> 00:03:35,740 We'll need to multiply it by one M. 46 00:03:35,740 --> 00:03:41,770 So, now we can call the M function, any time we need a relative value in M's. 47 00:03:41,770 --> 00:03:47,590 So, next we'll go over to our base styles, by clicking the base.scss partial and 48 00:03:47,590 --> 00:03:52,030 as we can see I've already defined the body's font size, line height, and 49 00:03:52,030 --> 00:03:56,410 font family, using some of the variables, we created earlier. 50 00:03:56,410 --> 00:04:01,045 So for example, here we have base font size, base font family primary. 51 00:04:01,045 --> 00:04:06,100 So to get a relative and unitless line-height value, we're using those text 52 00:04:06,100 --> 00:04:11,980 config variables, to divide the base line-height, by the base font-size, 53 00:04:11,980 --> 00:04:18,524 which as we can see in our CSS output, it returns a unitless value of 1.5. 54 00:04:18,524 --> 00:04:23,170 So, as you can see, SASS is really great at handling units. 55 00:04:23,170 --> 00:04:27,220 So, now, if we, for instance, wanna give the header, a top and 56 00:04:27,220 --> 00:04:30,835 bottom padding, equivalent to 48 pixels and 57 00:04:30,835 --> 00:04:33,840 M's, but we don't really wanna do any of the calculations. 58 00:04:33,840 --> 00:04:38,450 Well, that's fine, because now, we have that M function to do it for us. 59 00:04:38,450 --> 00:04:39,970 So in our header rule, 60 00:04:39,970 --> 00:04:45,410 we can say padding, and then we'll call the M function and as the argument, 61 00:04:45,410 --> 00:04:51,160 we'll pass 48 pixels and we'll make the left and right padding zero. 62 00:04:51,160 --> 00:04:54,560 And right below, if we want the H1's font size to 63 00:04:54,560 --> 00:05:00,550 be equivalent to 42 pixels and M's, we can say, font size. 64 00:05:00,550 --> 00:05:05,780 And then use the M function and pass the value, 42 pixels. 65 00:05:06,810 --> 00:05:07,570 And like we did for 66 00:05:07,570 --> 00:05:12,790 the body, we can use a division operator, to return a unitless line height. 67 00:05:12,790 --> 00:05:17,890 This time we need to divide the target of 46 pixels, because that's what we want 68 00:05:17,890 --> 00:05:24,730 the h1 line height to be, by the h1 elements font size of 42 pixels. 69 00:05:24,730 --> 00:05:29,740 Remember, the context is now the h1 elements font size of 42 pixels. 70 00:05:29,740 --> 00:05:32,960 So right below, we can do the same for a margin. 71 00:05:32,960 --> 00:05:38,400 So if we want a bottom margin we can say, margin bottom. 72 00:05:38,400 --> 00:05:42,310 And, this time we'll, again, use the M function, 73 00:05:42,310 --> 00:05:47,460 to divide our desired bottom margin by the h1's font size of 42 pixels. 74 00:05:47,460 --> 00:05:53,050 So let's say, 70 pixels divided by 42 pixels. 75 00:05:53,050 --> 00:05:57,280 Notice how we're only using the M function for our font size and our, 76 00:05:57,280 --> 00:06:02,790 bottom margin for the line height we simply use SASS's division operator, so 77 00:06:02,790 --> 00:06:08,060 right below, in our h2 rule we'll again use the M function to give our 78 00:06:08,060 --> 00:06:13,725 h2's a font size in M's equivalent to, 24 pixels, so let's say, font size, 79 00:06:13,725 --> 00:06:20,040 M, and as the argument, we'll pass 24 pixels. 80 00:06:20,040 --> 00:06:24,650 So now when we bring up our CSS output, we can see how those functions, 81 00:06:24,650 --> 00:06:29,720 return the padding, font sizes and margin values, in M's. 82 00:06:29,720 --> 00:06:34,750 Again, another example of how great SASS is, at handling and calculating units.