Pseudo-Element Mixin with @error5:45 with Guil Hernandez
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.
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 up