1 00:00:00,130 --> 00:00:03,200 Loops, loops and more loops. 2 00:00:03,200 --> 00:00:07,730 Last, we talked about how to use the at each directive to move through 3 00:00:07,730 --> 00:00:08,910 a complex list of items. 4 00:00:09,980 --> 00:00:14,910 But, as with all languages, there is more than one way to solve a problem. 5 00:00:14,910 --> 00:00:15,980 Because you know, 6 00:00:15,980 --> 00:00:19,990 if Sass only had one way to solve a problem, then people would complain. 7 00:00:19,990 --> 00:00:22,060 That's how they need to solve their problems. 8 00:00:23,150 --> 00:00:26,500 So Sass not wanting to be different is right there with the best of them. 9 00:00:27,830 --> 00:00:32,560 So let's take a look at how we can use the four directive to keep our 10 00:00:32,560 --> 00:00:34,850 code nice and dry. 11 00:00:34,850 --> 00:00:37,500 Let's say that we need to create a problem where we need to keep a series of 12 00:00:37,500 --> 00:00:41,270 selectors [UNKNOWN] even these space auto block the elements within. 13 00:00:41,270 --> 00:00:44,143 I'm sure we can do something like this but it wouldn't be sassy and 14 00:00:44,143 --> 00:00:45,130 is not very dry at all. 15 00:00:45,130 --> 00:00:48,520 I'm sure we can use an each loop to reiterate through a list and 16 00:00:48,520 --> 00:00:49,800 output something like this. 17 00:00:49,800 --> 00:00:52,350 But there is something more happening here. 18 00:00:52,350 --> 00:00:54,160 We aren't simply adding a name to a selector. 19 00:00:54,160 --> 00:00:55,990 There's real math happening here. 20 00:00:55,990 --> 00:00:56,860 So let's get into this. 21 00:00:57,890 --> 00:01:00,360 First off, I don't need a a list yet. 22 00:01:00,360 --> 00:01:01,360 Okay? I know. 23 00:01:01,360 --> 00:01:02,390 Just slow down there turbo. 24 00:01:02,390 --> 00:01:05,390 First we need a mix in that we'll call span and 25 00:01:05,390 --> 00:01:09,880 it is going to take a single argument for the number of columns I need to make. 26 00:01:09,880 --> 00:01:11,690 That's gonna look like this. 27 00:01:13,220 --> 00:01:17,960 So, now something that I need this mix in to do is to count the number of 28 00:01:17,960 --> 00:01:19,100 objects in an array. 29 00:01:19,100 --> 00:01:21,370 Remember that list function of length. 30 00:01:21,370 --> 00:01:22,840 That we used in the previous section. 31 00:01:22,840 --> 00:01:27,535 So what I wanna do is, I need to create an, a variable for 32 00:01:27,535 --> 00:01:31,570 col-val, and I'm gonna, I want to do the length of cols. 33 00:01:31,570 --> 00:01:34,340 So this is actually going to evaluate the length of a list that's 34 00:01:34,340 --> 00:01:37,280 being passed into this mixin as an argument. 35 00:01:37,280 --> 00:01:40,610 The new variable of col-val is going to hold the number of 36 00:01:40,610 --> 00:01:42,780 objects in the list for us. 37 00:01:42,780 --> 00:01:45,590 So, next we need to set up our for loop. 38 00:01:45,590 --> 00:01:46,710 Okay? 39 00:01:46,710 --> 00:01:53,620 So our for loop is gonna look like this at for and then I need to use a variable for 40 00:01:53,620 --> 00:02:00,060 the iterator and I want to go from from one through. 41 00:02:02,440 --> 00:02:03,980 The number of calls. 42 00:02:03,980 --> 00:02:06,870 Okay, that's the length from col-val, right? 43 00:02:08,370 --> 00:02:10,940 So let's cap that that of, so we have that so far. 44 00:02:10,940 --> 00:02:13,980 So this is looking good, so right now we have a loop and 45 00:02:13,980 --> 00:02:16,980 it's set up to basically repeat the task for the number of objects in the list. 46 00:02:16,980 --> 00:02:19,910 So what should we do to accomplish the rest of this? 47 00:02:19,910 --> 00:02:24,240 So to get the span one selector we need to basically create the CSS rules for this. 48 00:02:24,240 --> 00:02:29,720 So down here I'm going to use span and our old friend interpolation again and 49 00:02:29,720 --> 00:02:35,225 our old friend nth and then what I want to do is I need the value from cols, 50 00:02:35,225 --> 00:02:39,020 so each one of the cols I need the nth iterator and 51 00:02:39,020 --> 00:02:42,160 then in order to do this I'm going to pull the value... 52 00:02:42,160 --> 00:02:44,520 That I'm getting from this guy cuz as this thing loops through, 53 00:02:44,520 --> 00:02:48,607 it is gonna loop through everything in the list, and it is going to say one, two, 54 00:02:48,607 --> 00:02:50,680 three, four, five and it's gonna pin that value to this. 55 00:02:50,680 --> 00:02:53,510 And so then this value is gonna get carried into here so 56 00:02:53,510 --> 00:02:55,960 when I am doing calls I am looking at the entire list and 57 00:02:55,960 --> 00:02:59,850 I want the nth child of whatever iteration this is particularly going through. 58 00:03:01,510 --> 00:03:03,870 So when I'm in here, now I'm gonna write my CSS roles. 59 00:03:05,490 --> 00:03:10,430 If we were to use the add each loop, instead of the four loop 60 00:03:10,430 --> 00:03:15,320 what you would commonly see is something like let's say we have 61 00:03:16,430 --> 00:03:22,670 iterator is equal to iterator plus one. 62 00:03:22,670 --> 00:03:26,970 Okay, so that every time the loop actually goes through is gonna reset the value of 63 00:03:26,970 --> 00:03:28,380 I plus one more thing. 64 00:03:28,380 --> 00:03:31,770 So that's kind of like a manual way of doing what it is that I'm doing here if 65 00:03:31,770 --> 00:03:34,770 you were to only use the add each loop. 66 00:03:34,770 --> 00:03:37,980 But since we're using the four-loop this will be more awesome, so 67 00:03:37,980 --> 00:03:40,580 what I wanna do here is I'm gonna do some math now. 68 00:03:40,580 --> 00:03:41,906 So, I'm gonna say with. 69 00:03:41,906 --> 00:03:48,880 Is one divided by coll-val, okay? 70 00:03:48,880 --> 00:03:57,270 And then I'm going to say that this is multiplied by iterator. 71 00:03:57,270 --> 00:03:59,570 Okay? 72 00:03:59,570 --> 00:04:02,990 So using width attribute we're going to calculate the width value. 73 00:04:02,990 --> 00:04:07,520 The number we are looking for is a whole number that is divided by the number of 74 00:04:07,520 --> 00:04:09,870 objects and then multiplied by the iteration. 75 00:04:09,870 --> 00:04:14,580 So to get this to work, since the mixin contains the selector, we can 76 00:04:14,580 --> 00:04:19,130 call the mixin right into the Sass without nesting a selector, unless we wanted to. 77 00:04:19,130 --> 00:04:20,070 So I can do it on here. 78 00:04:21,890 --> 00:04:27,910 I can just say at clude spans. 79 00:04:27,910 --> 00:04:32,360 And I'm gonna say one, two, three, four. 80 00:04:34,240 --> 00:04:36,560 There we go. We have our output. 81 00:04:36,560 --> 00:04:40,230 So looking at this output I do see an issue. 82 00:04:40,230 --> 00:04:43,430 Those widths are close to what we want but not exactly what we want. 83 00:04:43,430 --> 00:04:47,550 The best way to clean this up is to use the percentage function, okay? 84 00:04:47,550 --> 00:04:52,870 So basically I'm going to put percentage right here, 85 00:04:52,870 --> 00:04:57,260 and I'm going to wrap some parens on this entire thing. 86 00:04:57,260 --> 00:04:57,890 And now. 87 00:04:58,900 --> 00:05:01,420 Looking at this, why did we choose the for loop? 88 00:05:02,560 --> 00:05:06,010 The value passed into the mixin are simply numbers, big deal. 89 00:05:06,010 --> 00:05:08,900 But wait, what if we to, to change them into strings? 90 00:05:10,060 --> 00:05:18,140 So I can do, one, two, three, four. 91 00:05:18,140 --> 00:05:20,900 Let's actually do this, get that dash in there and 92 00:05:20,900 --> 00:05:22,254 that separates them out a little bit better. 93 00:05:22,254 --> 00:05:25,800 So span-one, span-two, span-three, and span-four and because the for 94 00:05:25,800 --> 00:05:31,200 loop is actually iterating through each item in the list, it's actually, you know, 95 00:05:31,200 --> 00:05:35,530 it's doing math, it's doing counting, it's evaluating against a whole and 96 00:05:35,530 --> 00:05:37,570 it's coming up with a percentage. 97 00:05:37,570 --> 00:05:39,760 So if I did five. 98 00:05:39,760 --> 00:05:41,540 So everything gets broken down a little bit more. 99 00:05:41,540 --> 00:05:46,180 But I went back to two, now we're getting 50 and 100%. 100 00:05:46,180 --> 00:05:47,990 I can even do things. 101 00:05:47,990 --> 00:05:50,930 So just kind of imagine that you needed to build out some type of 102 00:05:50,930 --> 00:05:55,780 visual thing where every character being put into a particular visual is gonna 103 00:05:55,780 --> 00:06:01,578 have to take it's own space up so I can say John, Paul. 104 00:06:01,578 --> 00:06:05,121 Ringo, George, 105 00:06:05,121 --> 00:06:12,450 [INAUDIBLE], George and the fifth. 106 00:06:13,540 --> 00:06:14,830 Right? 107 00:06:14,830 --> 00:06:18,810 So, it should be noted that the for loop actually has two options. 108 00:06:18,810 --> 00:06:21,190 There is the through, which we discussed, and 109 00:06:21,190 --> 00:06:24,640 will start at the designated value and go all the way through. 110 00:06:24,640 --> 00:06:26,410 And include the final value. 111 00:06:26,410 --> 00:06:29,290 Another option is the to option where the for 112 00:06:29,290 --> 00:06:34,420 loop will go from the start value up to but not include the final value. 113 00:06:34,420 --> 00:06:38,930 So if I were to actually to update this from one, to call value, 114 00:06:38,930 --> 00:06:40,670 I lose the fifth Beatle. 115 00:06:40,670 --> 00:06:41,580 So, sorry guy. 116 00:06:41,580 --> 00:06:44,920 I don't know what his name is, but he's definitely not a Beatle anymore. 117 00:06:46,270 --> 00:06:49,450 So another thing that is interesting, is that as you can see. 118 00:06:49,450 --> 00:06:52,220 You know, these opportunities are pretty limitless. 119 00:06:52,220 --> 00:06:56,180 But with new feature added with Sass 3.3, 120 00:06:56,180 --> 00:07:00,480 we can actually move in either direction when we're using a for loop. 121 00:07:01,830 --> 00:07:04,930 So what we can do here is we can actually reverse these values. 122 00:07:04,930 --> 00:07:06,210 So if I wanted to do. 123 00:07:07,420 --> 00:07:14,500 From col-val through one. 124 00:07:14,500 --> 00:07:19,540 This will actually list out everything in the opposite order. 125 00:07:19,540 --> 00:07:22,370 So that's actually a pretty handy tool, because there's been many a times I've 126 00:07:22,370 --> 00:07:25,020 been given a list where the actual order of the list is not the way I 127 00:07:25,020 --> 00:07:28,630 want to iterate through things and I want to iterate in a different direction. 128 00:07:28,630 --> 00:07:30,130 So, that's pretty cool. 129 00:07:31,960 --> 00:07:35,240 The four Directive is interesting as it does allow yet 130 00:07:35,240 --> 00:07:40,360 another way to iterate on a list, and maintain a counter that is helpful for 131 00:07:40,360 --> 00:07:43,250 tracking an iterative value to perform other functions. 132 00:07:44,440 --> 00:07:46,770 So be it through, or 133 00:07:46,770 --> 00:07:52,450 to, the 4 Directive is super fun for [LAUGH] iterating on lists. 134 00:07:52,450 --> 00:07:56,580 Coming up next we will see how we can even take this a little further.