Data Structures

[00:00:00]
>> Mike North: So, if is a pretty useful concept in building out some very basic control flow. But sometimes, we come across things where we have very repetitive classes that are defined. A grid would be a great example where I'm sure everyone has used a grid before where you have, like a column that is two wide or three wide or four wide.

[00:00:25]
And you could kind of express, if you compared all these together, you would definitely notice a pattern. And we could just define these all line by line, but we could also define this in terms of like iterating through something. And SaaS gives us the ability to iterate using for and also each, which we'll look at later on.

[00:00:50]
For is used to iterate through a range of numbers. And you see here, we're using string interpolation as well, or interpolation, in this case it's in the selector itself, to generate a well orchestrated set of sizes for h1 through h5, right? And you see here, we're doing some simple math in order to determine the value here.

[00:01:15]
But this is a for loop.
>> Mike North: So with for loops, we get this data structure called an array. An array is just a set of values that are separated by either spaces or commas. If you make. Sorry. If you mix spaces and commas, you will almost certainly end up with lists within lists.

[00:01:41]
So if I had like what you see here from my list and then comma and then another space separated set of values, what you'd end up with is a list of two things, each of which was a list containing those four things. Does that make sense? So first, we split on one and then we split on the other and you can end up with something that's a little bit interesting.

[00:02:03]
Where might you see something like this? Has anyone seen like space separated stuff and then comma, space separated stuff? Anyone ever dealt with multiple shadows? Like an inset shadow and then another shadow. This is a concept that tries to mirror what already existed in CSS. Right, the way this works, it works in the same way that you have seen that concept with multiple shadows.

[00:02:32]
>> Mike North: We can iterate over a list using each. And it basically looks the same way as for, except you don't pass in one through five you pass it the list. And in this case, $i. That's gonna be the current item in the list. And here, we're doing something silly and pointless just to show that we can go through each of those values in order.

[00:02:58]
>> Mike North: So with lists, we also get a function called nth. NTH, right? That's like fifth, sixth, seventh, but generalized. And so, an example here where we have like two lists where we have gradients defined. What we're doing here is we're creating a linear-gradient using the second item in the gradients list, right?

[00:03:27]
Parenthesis, by the way, here are ignored. They're just here to provide clarity. It is completely valid to use parenthesis in this way, but you are not totally required to use them. Well actually, I take it back. You are required, because I'm using comma separated lists. Otherwise, it would be taken as a continuation of a single list.

[00:03:48]
>> Mike North: So nth is a way to pluck an item out of, essentially, an array. So this, if you're used to JavaScript, this is like square brackets with a number in there. Keep in mind, it is one indexed. It is not zero indexed. The first item in the array is the first thing, number one.

[00:04:08]
>> Speaker 2: It had to be different.
>> Mike North: Right, yeah. Just to be totally, to throw everyone for a loop. Literally, that was a loop joke.
>> Speaker 2: [LAUGH]
>> Mike North: So maps are the second and last type of data structure we're talking about today. Remember, we did numbers, strings, booleans, colors, lists, and now six.

[00:04:33]
This is maps. And they are key value pairs. They almost look like style declarations, right? Because those are typically key value pairs. And these are fantastic for storing things like themes, where you could have a theme that's defined as one variable and within that map, you could have multiple little sub-parts and use map-get to pluck off a particular value of interest there.

[00:05:01]
And you don't have to worry about collisions with other variables, because once you're in this map, it's sort of one cohesive object, right? And here, you can see I'm using map.get, which takes, as its first argument, the map. And the second argument is the name of the thing you want to pluck out of the map.

[00:05:22]
So here, I can create a dark button and a light button, referring by name, to those things that are in my map above. And this is the resulting CSS that we get on the right. And including the little interpolation I have there to like make a comment as to this is that theme.