From 030e673e6aef905964d6ac6032a16cbb6fa63d5c Mon Sep 17 00:00:00 2001 From: Paul Gamble Date: Sat, 20 Oct 2018 09:38:39 +0000 Subject: [PATCH] Update use-for-to-create-a-sass-loop.english.md (#23815) I did not understand the original lesson of "through" vs "to" upon first reading. Later reading the code below it started to make sense... but I added a bit more to the explanation. --- .../sass/use-for-to-create-a-sass-loop.english.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/curriculum/challenges/english/03-front-end-libraries/sass/use-for-to-create-a-sass-loop.english.md b/curriculum/challenges/english/03-front-end-libraries/sass/use-for-to-create-a-sass-loop.english.md index 2e37e78127..ce6ec9ba9e 100644 --- a/curriculum/challenges/english/03-front-end-libraries/sass/use-for-to-create-a-sass-loop.english.md +++ b/curriculum/challenges/english/03-front-end-libraries/sass/use-for-to-create-a-sass-loop.english.md @@ -10,7 +10,7 @@ challengeType: 0 ## Description
The @for directive adds styles in a loop, very similar to a for loop in JavaScript. -@for is used in two ways: "start through end" or "start to end". The main difference is that "start to end" excludes the end number, and "start through end" includes the end number. +@for is used in two ways: "start through end" or "start to end". The main difference is that the "start to end" excludes the end number as part of the count, and "start through end" includes the end number as part of the count. Here's a start through end example:
@for $i from 1 through 12 {
  .col-#{$i} { width: 100%/12 * $i; }
}
The #{$i} part is the syntax to combine a variable (i) with text to make a string. When the Sass file is converted to CSS, it looks like this: