- 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
Pseudo-Element Mixin with @error
5:45Now 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.
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