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 were going to build the toggle icon using our new pseudo-element mixin. We'll also learn how the new @error directive is useful for displaying error messages in mixins and functions.
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
We'll go over to our main.scss partial
file, where we already have the icon
0:00
toggle selector defined and a few
properties to style parts of it.
0:05
But before we include the pseudo element
mix-in in this rule,
0:11
let's go over to our HTML file and give
this toggle icon element,
0:15
the class toggle icon, so right here in
the opening span tag,
0:21
we'll add a class attribute and we'll say,
icn toggle.
0:26
And something else we'll do is give this
nested b element,
0:33
the screen reader text class, because
we'll also want this text hidden, but
0:37
still accessible to screen readers, so
let's add,
0:42
SRT, so when we save our index.html file
and go over to the preview,
0:45
there we see the toggle text, but when we
refresh, it's now hidden.
0:51
So, here we're seeing a part of our nav
toggle icon, which is, your
0:56
standard hamburger menu, as it's often
called, but the middle line is missing.
1:00
The, the meat of the hamburger icon.
1:05
So we'll add that part in the pseudo
element.
1:07
So back in our main dot CSS partial, we'll
go down to the icon,
1:09
toggle rule, and right above, we'll
include that pseudo element mixed in.
1:14
So we'll say, at include, PL, [SOUND] and
1:19
let's make this a before pseudo element by
passing before.
1:25
We'll make the width 25 pixels and the
height three pixels and
1:33
inside the mix-in, let's define a
background colour, so
1:38
we'll use the background property and
we'll again call that palette function,
1:42
we created in a previous video and we'll
want the light shade of our base grey.
1:47
So we'll pass grey in light, as the
arguments for
1:53
palette and let's set a top, offset of
four pixels.
1:55
Cuz remember, it's displayed absolute by
default.
2:02
All right, so when I save our main SCSS
file and
2:04
refresh our preview, there's our full
toggle menu icon.
2:07
Now currently, there's nothing preventing
us from outputting any value, for L.
2:12
So our mix-in is a bit fragile.
2:17
So for example, say I pass, b as a pseudo
element and when we refresh it,
2:21
well it's still outputs it and now we get
nothing, right?
2:26
So we need to fix this.
2:29
So in our case, we only want to output
CSS, if the value for
2:30
L, is either before or after.
2:35
So let's give our mix-in a fail-safe
feature, using SASS if and
2:38
warn directives.
2:42
So, I'm gonna write two directives, then
explain, what they do.
2:44
So right above, the rule in our mix-in,
2:50
at if [SOUND] el, equals before [SOUND] or
el, equals actor.
2:57
[SOUND]
3:07
Then we'll say,
3:09
else [SOUND]
3:18
@warn [SOUND]
3:22
and the message.
3:28
[SOUND] Okay, so here we're seeing if
3:36
the value we pass for l is either before,
3:42
or after, output the CSS for this mix-in,
3:48
otherwise don't output anything and
3:55
instead display this warning message
4:01
we defined, in the console.
4:07
So now if we take a look at our console
output and, scroll up we can see that,
4:11
right here it displays warning, b is not a
valid pseudo-element,
4:17
because earlier, remember, we defined that
l value as b instead of before.
4:22
Now, the latest version of SASS, supports
a new error directive that will
4:28
print a regular error message, in the CSS
output, and
4:32
it's really useful for these types of,
user defined mix-ins and functions.
4:35
So instead of warn, if we, use the error
directive and,
4:40
save it, when we take a look at, the
browser preview, we can see that,
4:46
since we didn't pass before or after, it
outputs the error message,
4:51
in our preview and it will also display it
in the CSS output.
4:57
So now if we go back to our main.scss
partial and, pass it before,
5:01
as the pseudo element type.
5:07
When we refresh our preview, everything's
back to normal.
5:09
Okay.
So, that does it for
5:13
functions and mix-ins.
5:15
Keep in mind that you can tailor any of
these examples, to your project's needs.
5:16
So now were starting to see the benefits
of using SASS,
5:21
to keep our code nicely organized and
configurable.
5:23
Next, we'll learn how BEM, or block
element modifier,
5:27
gives us a naming convention that helps
makes our code more modular and portable.
5:30
Once we build a few modules with SASS and
5:35
BEM, we'll see how easy it is to reuse
those patterns, instead of having to
5:37
create new ones, keeping our project
maintainable, regardless of the scale
5:41
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