gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Update use-for-to-create-a-sass-loop.english.md (#23815)

Browse Source 
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.
This commit is contained in:
Paul Gamble
2018-10-20 09:38:39 +00:00
committed by mrugesh mohapatra
parent 51f62a24e9
commit 030e673e6a
1 changed files with 1 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
curriculum/challenges/english/03-front-end-libraries/sass/use-for-to-create-a-sass-loop.english.md
View File

@ -10,7 +10,7 @@ challengeType: 0
## Description ## Description
<section id='description'> <section id='description'>
The <code>@for</code> directive adds styles in a loop, very similar to a <code>for</code> loop in JavaScript. The <code>@for</code> directive adds styles in a loop, very similar to a <code>for</code> loop in JavaScript.
<code>@for</code> is used in two ways: "start through end" or "start to end". The main difference is that "start to end" <em>excludes</em> the end number, and "start through end" <em>includes</em> the end number. <code>@for</code> is used in two ways: "start through end" or "start to end". The main difference is that the "start <b>to</b> end" <em>excludes</em> the end number as part of the count, and "start <b>through</b> end" <em>includes</em> the end number as part of the count.
Here's a start <b>through</b> end example: Here's a start <b>through</b> end example:
<blockquote>@for $i from 1 through 12 {<br>&nbsp;&nbsp;.col-#{$i} { width: 100%/12 * $i; }<br>}</blockquote> <blockquote>@for $i from 1 through 12 {<br>&nbsp;&nbsp;.col-#{$i} { width: 100%/12 * $i; }<br>}</blockquote>
The <code>#{$i}</code> part is the syntax to combine a variable (<code>i</code>) with text to make a string. When the Sass file is converted to CSS, it looks like this: The <code>#{$i}</code> part is the syntax to combine a variable (<code>i</code>) with text to make a string. When the Sass file is converted to CSS, it looks like this: