- Course Overview 1:52
- The Project Config File 9:14
- Pixels to Em Function 6:35
- Sass Function Challenge 1 objective
- Colors with Sass Maps 6:35
- Nested Sass Maps 7:20
- Review: Mixins and Functions 5 questions
- Background Image Mixin 7:30
- Pseudo-Element Mixin with @error 5:45
- Sass Directives Challenge 1 objective
Preview
Video Player
00:00
00:00
Pixels to Em Function
6:35Now 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