1
00:00:00,840 --> 00:00:03,440
Loops appear in most
programming languages.

2
00:00:03,440 --> 00:00:06,851
They provide a way to repeat a set
of actions over and over again.

3
00:00:06,851 --> 00:00:11,600
Loops simplify repetitive tasks by cycling
through lists of items or values and

4
00:00:11,600 --> 00:00:13,720
performing an action on each.

5
00:00:13,720 --> 00:00:17,540
For example, outputting a selector for
each author and a list of author names, or

6
00:00:17,540 --> 00:00:21,770
creating different sets of button styles
from a map of color names and values.

7
00:00:21,770 --> 00:00:24,420
Once again,
we'll briefly step away from our

8
00:00:24,420 --> 00:00:27,580
blog project to experiment with
loops in a separate workspace.

9
00:00:27,580 --> 00:00:30,400
Be sure to fork the snapshot
of this workspace and

10
00:00:30,400 --> 00:00:33,540
run the Sass watch command in
the console to follow along.

11
00:00:33,540 --> 00:00:36,410
I posted the link to the snapshot
in the teachers notes.

12
00:00:36,410 --> 00:00:38,940
So, there are three
types of loops in sass.

13
00:00:38,940 --> 00:00:41,860
The for loop, each loop and while loop.

14
00:00:41,860 --> 00:00:44,214
I'm not going to cover the while
loop in this close, but

15
00:00:44,214 --> 00:00:46,582
I have posted resources about
it in the teachers notes.

16
00:00:46,582 --> 00:00:50,252
Developers commonly use for
loops to repeat a block of styles,

17
00:00:50,252 --> 00:00:54,961
a certain number of times and each loops
to iterate over collections like maps and

18
00:00:54,961 --> 00:00:58,080
lists and perform an action on each item.

19
00:00:58,080 --> 00:01:01,830
So for example,
say you had to create ten class selectors.

20
00:01:01,830 --> 00:01:05,800
Each selector styles a box on the page and
applies a different background color.

21
00:01:05,800 --> 00:01:08,780
Well, you could manually
write each selector in CSS

22
00:01:08,780 --> 00:01:12,690
to style the background over and
over again until you've written ten rules.

23
00:01:12,690 --> 00:01:14,970
Well, all that typing
seems like a lot of work.

24
00:01:14,970 --> 00:01:18,890
Imagine, you wanted to apply different
background to 20 or 100 boxes on the page,

25
00:01:18,890 --> 00:01:21,350
that would be a lot of code.

26
00:01:21,350 --> 00:01:25,270
So for loops provide an easier
way to make this happen.

27
00:01:25,270 --> 00:01:29,020
In the file style.scss of our
new workspace, let's use a for

28
00:01:29,020 --> 00:01:31,430
loop to output ten class selectors.

29
00:01:31,430 --> 00:01:37,730
You define a for loop using the for
directive followed by an index variable.

30
00:01:37,730 --> 00:01:41,360
This variable adjusts the output for
each iteration in the loop.

31
00:01:41,360 --> 00:01:45,340
Developers commonly name
this variable i for index.

32
00:01:45,340 --> 00:01:50,710
For loops use the from keyword to
repeat an action like output a selector

33
00:01:50,710 --> 00:01:56,220
in a CSS rule a given number of times
from a start index to an end index.

34
00:01:56,220 --> 00:02:00,630
So for example,
the expression from one through 10,

35
00:02:00,630 --> 00:02:04,920
starts at one, loops through
each iteration, and ends at 10.

36
00:02:04,920 --> 00:02:10,790
So watch what happens when I write
a CSS rule inside this for loop.

37
00:02:10,790 --> 00:02:15,198
Let's target the class box, and
set the background color to tomato.

38
00:02:19,995 --> 00:02:23,449
When we save the file and
have a look at the output,

39
00:02:23,449 --> 00:02:29,470
notice how Sass outputs ten box rules that
set the background color to tomato red.

40
00:02:29,470 --> 00:02:33,630
Now, ten copies of the same
rule isn't very useful but

41
00:02:33,630 --> 00:02:36,970
using a loop you can dynamically
output a different class selector and

42
00:02:36,970 --> 00:02:38,830
background color per iteration.

43
00:02:38,830 --> 00:02:43,020
For example box-1, box-2, box-3 and so on.

44
00:02:43,020 --> 00:02:47,130
The for directive sets the value of i

45
00:02:47,130 --> 00:02:51,610
to each number in the specified range
from one through ten in this case.

46
00:02:51,610 --> 00:02:57,870
So, let's add a dash after our box class
and next we'll need to use what's called

47
00:02:57,870 --> 00:03:04,030
interpolation to insert each
value of i into the selector.

48
00:03:04,030 --> 00:03:09,622
Interpolation syntax consists of a hash
symbol followed by a set of curly braces

49
00:03:09,622 --> 00:03:15,046
and inside the curly braces, you write
be very well you want to interpolate or

50
00:03:15,046 --> 00:03:17,311
insert, which is going to be i.

51
00:03:17,311 --> 00:03:23,778
Saving this changes output ten CSS
rules using this selector box-1,

52
00:03:23,778 --> 00:03:27,488
box-2 all the way through box-10.

53
00:03:27,488 --> 00:03:28,970
As you can see,

54
00:03:28,970 --> 00:03:34,430
the interpolation syntax output each
value of i as part of the selector.

55
00:03:36,890 --> 00:03:40,430
Now, let's set each box to
a different background color.

56
00:03:40,430 --> 00:03:45,309
So for this example, I'll use Sass'
adjust hue function to change

57
00:03:45,309 --> 00:03:48,657
the hue of the color
tomato on each iteration.

58
00:03:53,830 --> 00:03:58,782
The adjust hue function requires a degree
value that adjusts the hue of the color by

59
00:03:58,782 --> 00:04:01,200
rotating it along the color wheel.

60
00:04:01,200 --> 00:04:06,260
So for example, the value tomato,20
rotates tomato by 20 degrees.

61
00:04:06,260 --> 00:04:10,600
So we can dynamically change
the rotation on each iteration

62
00:04:10,600 --> 00:04:13,560
using the loop's i variable.

63
00:04:13,560 --> 00:04:17,650
Since i takes on each value in
the sequence, from 1 through 10.

64
00:04:17,650 --> 00:04:22,030
In this case, let's multiply
each value of i by 20 degrees.

65
00:04:22,030 --> 00:04:25,280
So after the comma we'll
type the i variable

66
00:04:25,280 --> 00:04:27,990
called by the multiplication operator.

67
00:04:27,990 --> 00:04:31,350
I'll give the file a save and nice.

68
00:04:31,350 --> 00:04:35,629
Our loop outputs a different
background color for each selector

69
00:04:41,166 --> 00:04:45,662
If you need more box selectors,
simply change the end value.

70
00:04:45,662 --> 00:04:49,323
So, let's make it 20.

71
00:04:49,323 --> 00:04:53,750
And now we have 20 box rules,
each with a different background color.

72
00:04:57,806 --> 00:05:02,949
Now going back and
changing the start value to say,10

73
00:05:02,949 --> 00:05:09,854
creates a set of selectors starting
from box 10 through box 20, neat.

74
00:05:11,406 --> 00:05:16,510
When creating a for loop,
the keyword through includes the start and

75
00:05:16,510 --> 00:05:19,440
end values of the specified range.

76
00:05:19,440 --> 00:05:22,820
So here, for example,
our loop is telling Sass,

77
00:05:22,820 --> 00:05:27,910
go from 1 all the way through 10,
and stop.

78
00:05:27,910 --> 00:05:32,325
Well, you also have the option of
using the to keyword in a for loop.

79
00:05:32,325 --> 00:05:35,550
To begins at the start value and

80
00:05:35,550 --> 00:05:38,860
loops over each value in the sequence
except for the end value.

81
00:05:38,860 --> 00:05:42,080
And when it gets to the end value
it stops the looping process.

82
00:05:42,080 --> 00:05:47,290
So now, we're telling Sass to loop from
1 to 10 and when you get to ten stop.

83
00:05:48,500 --> 00:05:51,120
Since it doesn't iterate
that one last time,

84
00:05:51,120 --> 00:05:54,360
Sass does not include the end
value in the CSS output.

85
00:05:54,360 --> 00:05:58,660
So now we're outputting
the selectors box 1 to box 9.

86
00:05:58,660 --> 00:06:01,190
Most of the time I'm going to use through

87
00:06:01,190 --> 00:06:03,440
to iterate from the start
through the N value.

88
00:06:03,440 --> 00:06:06,930
I just wanted you to be aware of the two
key words just in case you come across it

89
00:06:06,930 --> 00:06:07,515
in a project.

90
00:06:07,515 --> 00:06:12,660
For loops are also useful when generating
numbered selectors with the nth

91
00:06:12,660 --> 00:06:16,900
child pseudo class or in generating
column classes for grid systems.

92
00:06:16,900 --> 00:06:20,830
In the teachers notes, I posted a link to
a Treehouse video that teaches you how to

93
00:06:20,830 --> 00:06:24,060
auto generate column classes for
a responsive grid using a forward loop.