Bummer! You have been redirected as the page you requested could not be found.
Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Modular CSS with Sass!
You have completed Modular CSS with Sass!
Preview
Now we're going to write a Sass function that automatically converts pixel values to em units.
Quick Reference
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
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 upYou need to sign up for Treehouse in order to set up Workspace
Sign up