Write Loops with @for

Loops appear in most programming languages. 0:00 They provide a way to repeat a set of actions over and over again. 0:03 Loops simplify repetitive tasks by cycling through lists of items or values and 0:06 performing an action on each. 0:11 For example, outputting a selector for each author and a list of author names, or 0:13 creating different sets of button styles from a map of color names and values. 0:17 Once again, we'll briefly step away from our 0:21 blog project to experiment with loops in a separate workspace. 0:24 Be sure to fork the snapshot of this workspace and 0:27 run the Sass watch command in the console to follow along. 0:30 I posted the link to the snapshot in the teachers notes. 0:33 So, there are three types of loops in sass. 0:36 The for loop, each loop and while loop. 0:38 I'm not going to cover the while loop in this close, but 0:41 I have posted resources about it in the teachers notes. 0:44 Developers commonly use for loops to repeat a block of styles, 0:46 a certain number of times and each loops to iterate over collections like maps and 0:50 lists and perform an action on each item. 0:54 So for example, say you had to create ten class selectors. 0:58 Each selector styles a box on the page and applies a different background color. 1:01 Well, you could manually write each selector in CSS 1:05 to style the background over and over again until you've written ten rules. 1:08 Well, all that typing seems like a lot of work. 1:12 Imagine, you wanted to apply different background to 20 or 100 boxes on the page, 1:14 that would be a lot of code. 1:18 So for loops provide an easier way to make this happen. 1:21 In the file style.scss of our new workspace, let's use a for 1:25 loop to output ten class selectors. 1:29 You define a for loop using the for directive followed by an index variable. 1:31 This variable adjusts the output for each iteration in the loop. 1:37 Developers commonly name this variable i for index. 1:41 For loops use the from keyword to repeat an action like output a selector 1:45 in a CSS rule a given number of times from a start index to an end index. 1:50 So for example, the expression from one through 10, 1:56 starts at one, loops through each iteration, and ends at 10. 2:00 So watch what happens when I write a CSS rule inside this for loop. 2:04 Let's target the class box, and set the background color to tomato. 2:10 When we save the file and have a look at the output, 2:19 notice how Sass outputs ten box rules that set the background color to tomato red. 2:23 Now, ten copies of the same rule isn't very useful but 2:29 using a loop you can dynamically output a different class selector and 2:33 background color per iteration. 2:36 For example box-1, box-2, box-3 and so on. 2:38 The for directive sets the value of i 2:43 to each number in the specified range from one through ten in this case. 2:47 So, let's add a dash after our box class and next we'll need to use what's called 2:51 interpolation to insert each value of i into the selector. 2:57 Interpolation syntax consists of a hash symbol followed by a set of curly braces 3:04 and inside the curly braces, you write be very well you want to interpolate or 3:09 insert, which is going to be i. 3:15 Saving this changes output ten CSS rules using this selector box-1, 3:17 box-2 all the way through box-10. 3:23 As you can see, 3:27 the interpolation syntax output each value of i as part of the selector. 3:28 Now, let's set each box to a different background color. 3:36 So for this example, I'll use Sass' adjust hue function to change 3:40 the hue of the color tomato on each iteration. 3:45 The adjust hue function requires a degree value that adjusts the hue of the color by 3:53 rotating it along the color wheel. 3:58 So for example, the value tomato,20 rotates tomato by 20 degrees. 4:01 So we can dynamically change the rotation on each iteration 4:06 using the loop's i variable. 4:10 Since i takes on each value in the sequence, from 1 through 10. 4:13 In this case, let's multiply each value of i by 20 degrees. 4:17 So after the comma we'll type the i variable 4:22 called by the multiplication operator. 4:25 I'll give the file a save and nice. 4:27 Our loop outputs a different background color for each selector 4:31 If you need more box selectors, simply change the end value. 4:41 So, let's make it 20. 4:45 And now we have 20 box rules, each with a different background color. 4:49 Now going back and changing the start value to say,10 4:57 creates a set of selectors starting from box 10 through box 20, neat. 5:02 When creating a for loop, the keyword through includes the start and 5:11 end values of the specified range. 5:16 So here, for example, our loop is telling Sass, 5:19 go from 1 all the way through 10, and stop. 5:22 Well, you also have the option of using the to keyword in a for loop. 5:27 To begins at the start value and 5:32 loops over each value in the sequence except for the end value. 5:35 And when it gets to the end value it stops the looping process. 5:38 So now, we're telling Sass to loop from 1 to 10 and when you get to ten stop. 5:42 Since it doesn't iterate that one last time, 5:48 Sass does not include the end value in the CSS output. 5:51 So now we're outputting the selectors box 1 to box 9. 5:54 Most of the time I'm going to use through 5:58 to iterate from the start through the N value. 6:01 I just wanted you to be aware of the two key words just in case you come across it 6:03 in a project. 6:06 For loops are also useful when generating numbered selectors with the nth 6:07 child pseudo class or in generating column classes for grid systems. 6:12 In the teachers notes, I posted a link to a Treehouse video that teaches you how to 6:16 auto generate column classes for a responsive grid using a forward loop. 6:20