Challenge 4: Solution

[00:00:00]
>> Mike: So we're gonna go through the solution to this mixins exercise here. Let me begin by kind of resetting some stuff. Killing my existing server, and starting up the new one.
>> Mike: Mixins, great. All right, so there are the buttons that we have and you can see that we've got a bunch of tests.

[00:00:29]
There's one test set, one set of assertions per button color, asserting that we have in fact gotten the colors correct. If we open the mixins folder and look at our scss here. We've got app.scss, variables and mixins and if we look at app, we've brought in the variables first and then the mixins as I advised earlier as we were leading up to this.

[00:00:57]
And you can see that we've got some default stuff going on here that applies to all buttons. And then we are consuming a mixin for each of these seven colors. In one case we're using a variable, in others we're using a color literal, just a hex value for color.

[00:01:16]
And it's a little disappointing cuz on the right everything is gray and that's not we're aiming for. So what I'm gonna do is go to the mixins file and you can see here, we've taken this variable color. So this is only available within the context of this mixin and we can begin with,

[00:01:37]
>> Mike: Oops, background color of color.
>> Mike: All right, so this is great. Now if we look at our tests, it's a subtle change. They did change a little bit. Let's see.
>> Mike: Maybe they didn't. Well, they're complaining about a font color now. It may be that it's failing font color before it even gets to background.

[00:02:05]
So it's saying that it expected to find fff, it found 000 instead. So let's try this, and the test passed. So pretty simple to go through. Now if we look at our CSS, does anyone have a problem with what we're looking at here? Is there an improvement we can make?

[00:02:30]
If I required that we make this file smaller, the CSS file smaller, what could we do?
>> Speaker 2: Could you define the text as white as more of a global?
>> Mike: Yes, I could. And so here we've used something in the mixin that is not dependent on the variable being passed in.

[00:02:51]
It applies no matter what, right. So the idea here is if I want to get rid of this repeated style declaration on a pro color basis, we're currently at 53 lines. And put that, we're failing now, put that over here in the root button style block. We end up cutting it down pretty significantly.

[00:03:17]
This is what you wanna use whenever you're creating these little modifier flags like this. You want them to be scoped to only those things that variables pertain to. And you want to move as much as possible out into a single style declaration. So that basically the cost of adding additional button colors here is significantly cheaper in terms of the overall size of our SASS.

[00:03:44]
Now it may seem like just a few lines here, but this practice in aggregate can shrink the overall size of your CSS by a lot, right? Remember this is a very simple button and a very simple, like one line mixin, two line or one line mixin. In reality, it's likely that these will be much bigger, right?

[00:04:05]
And so you will end up saving proportionately much more.