Custom Property with a Sass Loop

[00:00:00]
>> So this code works and it does make another reusable component that we can use in a number of places. But it's very unwieldy and this is where SASS comes in we can actually use a SASS loop to make this this code more palatable. If we're just writing CSS, then we're done at this point, it's a little ugly, but it works.

[00:00:23]
And anybody using our component doesn't have to come into contact with his ugliness. Cuz it's all encapsulated inside the CSS that styles, this pie chart. But if we actually to go one step further and make the code a little more maintainable with SASS, we can do that. So, SASS allows us to work to use SASS variables in names of properties as well.

[00:00:50]
So what we're going to have to do is, we're going to have a SASS loop from i from one through five. And then we're gonna use this i variable, And remember we need the interpolation syntax anytime we use a variable into a less common context. Property names, custom property value, selectors, all these things require interpolation.

[00:01:25]
So it's color and i. And then, let's take one of these examples and we're going to parameterize it. So here we have color one, which we are going to replace with color i and then here the hue, we wanted to, Be i times 25 and at this point, I think we're pretty much done with the colors I should be able to remove this.

[00:02:04]
Note that here we've done one through five, so this should give us 25, 50 and so on, it doesn't give us zero. So we could subtract 25 or we could just go with this different colors, I'm gonna subtract 25 for now. I used i without the dollar here.

[00:02:24]
If nothing changes, we've done it right. Yes, excellent. Some of the repetition is gone. Now, we need to get rid of this repetition with values as well, so how are we gonna do that? Let's take value2 and parameterize it here. A lot of it is similar, we're just gonna 2 replace two with i and here we're gonna replace 1 with i minus 1.

[00:02:56]
And then we're gonna replace two with i again here, the problem is, what happens with the first one? We don't have a value zero, we've provided a zero fallback here let's make it 0% here as well. Actually that that was what it needed, yeah. Especially since we don't actually have a value zero property, so we do need a fallback for that.

[00:03:26]
Because we are fully aware that our first declaration, we'll have a property that doesn't exist. Let's take a look so see the compiled CSS, we have a value zero that doesn't exist. So, let's go back to the SASS, so now we've removed a lot of the repetition. And the remaining repetition is this list of color stops, so at this point we might say, okay, we're done here and we could move on.

[00:04:07]
But if we want to remove that repetition as well we could use what's called lists in SASS. And we could have a list of stops and then here, In the loop for each stop, And then in the loop, we build a list of stops for the gradient by using the append function.

[00:04:38]
So the append function takes the actual list name and then the color and the two positions. So let's take one of the actual color stops we have and parameterize that and to make them a little bit more uniform. We can actually add a zero to the first one that doesn't change anything.

[00:05:02]
So we could go here, change this, take this, And, Instead of one, we want our installer i And then same here, instead of value1, we want value i and then we also need to specify how we're appending. So we specify comma because we want these to be comma separated.

[00:05:37]
And let's see what this produces. Actually right now won't produce anything because we haven't, output stops anywhere yet. So let's go to the gradient and output the stops list, so we output stops here. We need to use the interpolation syntax again but as we can see, let's look at the compiled CSS.

[00:06:00]
All our stops are right there. It's exactly the same as if we had canned coded them well, except the formatting would have been better but who cares? Except with a lot less repetition and if we want to support 15 color stops instead of five, we can do that.

[00:06:18]
We can just increase one number and I mean we're not going to need more than that, right? We're not gonna need more than 15 slices at that point the pie chart would get unreadable. So it's very at this point it's a very customizable pie chart with how many lines of code, 18, that's all there is, 18 lines of SASS.