But I realized I missed a mixin that I wanted to show you guys so that's what this guide will be about. We are going to implement a mixin that takes in a few variables and should reduce the amount of code we overall write. So to get started you'll see that we're writing position absolute, top, left, and transform quite a bit. So let's write a mixin that we can just kind of call like a function in JavaScript but in SASS and include it in here. So let's start with the message container and let's write this mixin. So I've explained this before but if we type in transform translate -50 and these values it will center an item on the screen. So let's go ahead and call this @mixin center-item and then let's not give it any variables for now but let's just copy this in

let's cut it in rather and then let's just @include center-item.

All right so @include center-item save that and nothing should be different the message container should still be telling us. Happy Birthday.

All right now the problem arises when we try to include this in other places so it's just so we can reference back to these values let's comment these out

Put this in right here. Let's save that and you'll see the title is not where we want it to be centered exactly in the middle screen. So let's pass in some variables in here and make it so we can use this mixin to reduce the amount of code we write but make it so we can modify what's in this mix in a little bit so let's call the first variable $pull-x and let's give it a default value of -50%. That's going to allow us to have a default value so we don't have to put these parameters in every single call we do and then let's give it a pull-y of -50% because when we center in an item it's going to be something along those lines so translate -50 -50. These are the default values to center something on the screen and I can just include that mix in here. Actually, I will not do that yet. That might get confusing so let's just leave that how it is. Let's go back here and just know that that code that was up here this code is to center on the screen. So we want to give this mix in a -50% and -50% for x and y as default values because it's called center item that's the default functionality and that's all we want it to do.

Then let's give it a top of 50% and a left of 50%. Same thing here we want it to be centered. Okay now replace these so left and top and then transform let's give it a value here of pull-x and pull-y. So this is going to be negative 50 and this is going to be negative 50.

@mixin center-item($pull-x: -50%, $pull-y: -50%, $top: 50%, $left: 50%) {
    position: absolute;
    top: $top;
    left: $left;
    transform: translate($pull-x, $pull-y);
   }

So the first thing we want to enter in here for our message-container is going to be center-item pull-y0% and let's see if that puts it where we want it to be and it's actually going to apply negative 50 to this as well. But we don't want that in there anyway so let's leave that, now let's see what we need to put in for this.

.message-container {
     @include clock-dimensions;
     @include center-item($pull-y: 0%);
     margin-top: 20px;
   }

So for center-item, we want a position of absolute which is going to be default always and then we want to left value of we're going to put in the top first since it comes before it so let's put in 5% and for left let's put in 10%. Okay so let's delete that and let's see if this works properly. Awesome! So it put us up there and it looks like something's not working. Let's comment this out and bring this back in and see what it is. So left is 10% and the top is 5% position is absolute. So the problem is that we don't want this translate in here for this. So we could just modify these values so it doesn't do this. Let's see what we can put in for this. We can also just put these as 0 so let's leave this and let's just delete these and then leave this but then add in pull-x and pull-y and just set them to 0. So pull-x if I could type on the keyboard that would be nice pull-yand set these both to zero. Save that and it should be in the same position. Let's comment it out and save it and see if it moves.No, let's put it back in and see if it's back. Exactly where we want and we reduced a lot of code. Let's go ahead and put it at the top of the selector here so it looks a little nicer and more consistent with this. And then for this let's add it in so let's copy it and then for the bottom let's add in these values. So we could say well let's just leave this in here and let's just put in the 10% left, let's put in 0 for the top so we can get rid of those and we don't need position absolute and that should be good it should be in the same exact position. So it's not and let's see why all right because we're applying a top value of zero and then it kind of conflicts with the bottom value. So what we want to do is let's just go ahead and type in zero and let's just get rid of this

and push it down 10%. Let's go down a little bit more let's see what 15% looks like. Okay, so that's looking all right let's just leave it like that. So let's see where else we can apply this all right we have these. So there are a bunch of places we can apply it and I'm not going to walk you through that throughout this whole guide just because that's going to get a little bit tedious for you to watch and you already know the idea and you've probably already changed this in you're app by now. So before you go on to the next guide. Just go ahead and implement this everywhere you can and feel free to modify it and make it better. This was just a really quick implementation of it. There's a lot of different ways you could make this work better. So I will see you in the next guide. Let's just commit this really quick so

git status
git add .
git commit -m "created a quick mixin and applied it throughout our app for positioning items"

get as get command created a quick connection and apply it throughout your positioning items. All right let's go ahead and in the next video we will move this to our mixin file and we will get into the styles for our date picker. All right I'll see you in the next guide.

Resources

Source Code