 I recently had a live stream where I was diving into SaaS and while I didn't make as much progress on the project as I'd intended when I started, near the end, someone in the chat asked me about creating a mix-in that we could use to use for a hover effect on buttons. And it was a really fun idea and it actually led to me creating a second mix-in also for pseudo elements along the way. And I think together they do a really good job of showing one of the reasons I still love using SaaS even as CSS continues to evolve. I thought it was a really good part of the stream and so I've taken that one part from the much longer live stream and here it is just for you. So something with like transforms mix-in. I mean, for something like that, wouldn't even, you could call it like a hover lift. So I mean, I would do this for like anything I'd want to put it on. Now maybe you'd only plan on using it for buttons, but. So if you put that, I'm just trying to think, I'd probably do a transform. No, transition, transform, transform. This is where having a variable setup for this would be good of like a speed. So like 500, you know, like a speed, but whatever. We'll just throw a like 350 maybe for now. Transition, transform that and ease in out. And that I probably wouldn't want to keep that too. I'd change this eventually to a cubic bezier. And then we'd have our and, man, seven. There we go. My new keyboard doesn't have like the, I can only see the numbers. I can't see what the shift is. So I keep mixing stuff up there. So and hover and focus. Oops. No, get out of here. And hover and focus. And then we would do a transform scale. Scale is like super powerful, right? So 1.05 maybe. And this is where I'd need a button to actually see or actually have something for it to work on. But something simple like that would probably work. And you'd probably want to actually, this is where a mix in really does come in handy. Because if you wanted a shadow to go with this, what you'd probably have here is box shadow of something. And this is where I talked, I did a video on it with like high-performance shadows. Whereas here you could have a box shadow of say, I'm just trying to think zero, 0.25 M. So it's shifting down just a little bit. 0.5 M for the blur. So a smallish blur, zero offset and an RGBA of black 0.2. Nice thing with SAS, you can do that. And it will output the RGBA value for you. One of my favorite things, one of my favorite SAS functions. And then I would come in with an and, oops, and before that. So the before has, and actually another mixing we could create would be for a pseudo element. So why don't we do that at mix in pseudo? We could call it a, well, just call it before because we can do another one for after. Cause creating pseudo elements always sucks, right? So a mix in is nice. Cause every time you have a pseudo element, you'll want to have content. And what you could do, like, if this was one where I would picture myself ever needing something in here, we could make an optional argument that could insert content. Or we could even say like content here is, would this work? Let's just see. I'm not sure if I've never tried this. Content is nothing. And then here we could say that the content is content. So if ever you needed to bring in content into your pseudo element, it would work. And we could even do like content position, sorry. Position is absolute. So here position is position. But if ever I needed to change that, I could. I feel like I'm doing something wrong cause this is red, but whatever. We'll see if I mucked it up or not. So the content by default will be this, which is what we want. The position will go pause, not position, pause. We'll use this, which will default to absolute cause usually I do that for my pseudo elements. I'm also mucking one thing here. So position, position of relative. And then here I'd wanna do the ampersand. And I'm saying this is a before, so before. And you could even get more comp, like you could make this so you could do it as a before or an after using your mix in, but we'll just do. Position is absolute. So content is nothing, position is absolute. I think we could just do that. And then I would also want an at content here, at content. So what I could do then is I could actually use this mix in inside here. So then I could do at include, before. And then if I did put something here, so here I do box shadow. Box shadow of, we'll do zero. I'm trying to think if I should move it down or not. Whatever, I'm just gonna do a 001.25m, zero, rg, ba, ba of black at like 0.4. And you might be wondering like, why would I wanna make that a pseudo element? But it's because here I would wanna do a opacity of zero. So you can't actually see the shadow. And then what happens is on the hover, the, your, and, this is my before. I should have done it as an after, right? I'll make this after for now, after. Just cause it makes more sense for a shadow, I think. Anyway, whatever. My after would get an, oops, my after. You get an opacity of one. And that's also what would be transitioning. Transition, this is where like a transition is a nice variable to have. So like ideally I'd also bring that in. So if this worked properly, let's go see if this actually makes sense. We'll call this dot btn, dot btn. And if we do at, what did I even call it? I called it hover lift. So at include m dot hover lift, what's gonna happen? Is that gonna compile? Let's see if that worked out properly. Nice. Button hover, yeah, I think that actually worked out. So from all, from writing this, I can get all of that, which is nice. So it's coming in with the pseudo element. The content is good. Position, I don't need the position absolute though. Oh, would I? Yeah, I guess for that, I would want that to be positioned absolute. And I'd have to work on that a bit more just to get it actually underneath. Cause right now it's not gonna be in the right spot. So I'd have to play with that a little bit more. This is where like actually having something that I'm looking at on the page would help. But you get the idea of how that could be useful. So button hover, button focus, when you go on the transform will scale up and that other shadow will come in that's on the pseudo element. Yeah, I love Nixon. So like for me, the pseudo element one's super nice. I would have to play with this a bit more though. Like you could even bring in everything as arguments, right? So you could have content, position, top left, bottom right, all set up. And even here, I'm calling it after. Like you could even have it. I think you'd have to use extrapolation though, right? Let's try. We'll do this and then I gotta go. I gotta get some lunch. So here we'll just call it, I'm gonna keep it as after for now. But here let's just, and I'll change it all after. I just wanna see if this is even gonna work. Location is by default, let's just say by default, it's a before. Before. Before like this maybe. And then here, after we want a dollar sign and then we want location. Nope. Oh no, da, da, da, da, da. Because I can't just put the location here. I need to extrapolate it, no? Walk. Yeah, that doesn't work. This needs to be extrapolate. How do I do the extrapolation sass? Oh, it's a hash, whoops. I was saying extrapolation, interpolation. Did that work? That worked. So my location is before. So, and then if I change this to after here just for fun, you can see that's after now. Cool. So this we could call this like pseudo, pseudo. Leave everything else the same. This would have to import that though. Hover lift include pseudo. And what I could say is that the location is actually an after instead. And then that brings it in as an after. Whereas if I put this as before, it's doing it. Oh, here. Why is this one staying after? Oh, I had that as an after. The reason I put an after here instead of using that is just because I didn't want to bring in all this stuff again. Because I think it would muck things up actually. So that's a little bit of an issue, but not the end of the world I could just put before. And just have to remember to change it. Once you set this up, like this is set up to always be the before. So I don't find that's a big deal. Maybe there's a smarter way to do that, but I think that's fine. So that's good. And then I guess like ideally, ideally you would set this up a little bit more though, right? And even just to make this a bit more readable, you could definitely do this. Just so if you come across this, you want to be able to read it. And then we could do top, top, zero, bottom, zero. I think it's a pseudo element. This is probably the most common left. Maybe I'm wrong. Right. I just feel like that's probably what you're using most of the time. So then you could set all of these up. There we go. No, whoops. I don't want those to be zero though. I want each one of those. I can't do all of them at once. That's why I come in here. Top, whoops. Top, bottom. Come on, Kevin. Bottom, left. And right. There we go. So now just for fun, if I came in here, let's just say it's on something else. Say you come in with like a card and for some reason your card needs a pseudo element on it. I can do an at include m.sudo. And it should. It'll put my card that has a pseudo element on it. So all of that's already done. And then if I wanted to, I could come and change stuff. So I could say that. And actually, I think if I'm in the right order here, I could actually just write in after and it would switch, right? Yeah. The only thing that's important here is if you're not saying what you're changing, it has to be in the right order. So, but if I just write after, it's becoming the after. And if I write before, it's becoming before. If I leave it blank, it's going to before because the position is, whoops, not the position. Where's my, where did I define it? Here, location's the first thing and it's defaulting to before. So I could do, if I, you have to do them in order if you're not putting the name or the variable but or the argument name or whatever you want to call it. But if I say here top is 50% now, it should only overwrite the top one. And it keeps all the other things. Or I could even come in with a position of relative and I could switch out the position to be relative and 50%. So that can be a nice use for mixing. There it is. I hope you really liked that. If you'd like to see the entire live stream instead of just this one little snippet for it, I have a link to the unlisted YouTube video down a bit below. And if you'd like to catch one of my live streams live, I'm on Twitch every single Monday, plus I'm doing some extra ones every now and then as well. So jump on over to Twitch. The link for it is down below. You can give me a follow there and you'll be notified when I go live. I'd really love to see you at some of my live streams. The chat is so much fun. As you can see from what we did in this video, they give me some great ideas and we learn a lot of awesome stuff along the way. Thank you so much for watching. A really big thank you to my patrons for their support each and every month. And of course, until next time, don't forget to make your call on the internet just a little bit more awesome.