From bf255ddb0511f29d55b74c7a7e41b653453958bf Mon Sep 17 00:00:00 2001
From: Andrei Calinescu <andreicali@gmail.com>
Date: Sat, 9 Mar 2019 00:37:52 +0900
Subject: [PATCH] Added SASS solutions, fixed typos, code formatting (#34792)

* Added SASS solution and output CSS

* Fixed typo, added code formatting

The example code outputs for "start to end" and "start through end" were swapped. "1 to 3" does not include the end number, so should output "1 2", while "1 through 3" includes the end number, so should output "1 2 3"

* Added SASS solution and output CSS

* Added SASS solution

* Updated solution to full solution

Now includes all seed code, plus the changes needed to pass the tests, per @thecodingaviator [suggestion](https://github.com/freeCodeCamp/freeCodeCamp/pull/34792#pullrequestreview-210097979).

* Updated solution to full solution

Now includes all seed code, plus the changes needed to pass the tests, per @thecodingaviator suggestion https://github.com/freeCodeCamp/freeCodeCamp/pull/34792#pullrequestreview-210097979.

* Fixed Markdown syntax

Minor edit

* Updated solution to full solution

Now includes all seed code, plus the changes needed to pass the tests, per @thecodingaviator suggestion https://github.com/freeCodeCamp/freeCodeCamp/pull/34792#discussion_r263731937.
---
 .../index.md                                  | 42 ++++++++++++++--
 .../use-for-to-create-a-sass-loop/index.md    | 49 +++++++++++++++++--
 .../index.md                                  | 30 ++++++++++--
 3 files changed, 112 insertions(+), 9 deletions(-)

diff --git a/guide/english/certifications/front-end-libraries/sass/use-each-to-map-over-items-in-a-list/index.md b/guide/english/certifications/front-end-libraries/sass/use-each-to-map-over-items-in-a-list/index.md
index 1e4d327051..543785663e 100644
--- a/guide/english/certifications/front-end-libraries/sass/use-each-to-map-over-items-in-a-list/index.md
+++ b/guide/english/certifications/front-end-libraries/sass/use-each-to-map-over-items-in-a-list/index.md
@@ -3,8 +3,44 @@ title: Use @each to Map Over Items in a List
 ---
 ## Use @each to Map Over Items in a List
 
-This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/certifications/front-end-libraries/sass/use-each-to-map-over-items-in-a-list/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
+## Solution
 
-<a href='https://github.com/freecodecamp/guides/blob/master/README.md' target='_blank' rel='nofollow'>This quick style guide will help ensure your pull request gets accepted</a>.
+```sass
+<style type='text/sass'>
+  
+  @each $color in blue, black, red {
+    .#{$color}-bg {background-color: $color;}
+  }
+  
+  div {
+    height: 200px;
+    width: 200px;
+  }
+</style>
 
-<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds  -->
+<div class="blue-bg"></div>
+<div class="black-bg"></div>
+<div class="red-bg"></div>
+```
+
+
+The solution above will generate the following CSS:
+
+```css
+.blue-bg {
+   background-color: blue;
+ }
+ 
+.black-bg {
+   background-color: black;
+ }
+ 
+.red-bg {
+   background-color: red;
+ }
+ 
+div {
+  height: 200px;
+  width: 200px;
+}
+```
diff --git a/guide/english/certifications/front-end-libraries/sass/use-for-to-create-a-sass-loop/index.md b/guide/english/certifications/front-end-libraries/sass/use-for-to-create-a-sass-loop/index.md
index 0909fb9c13..4191ba15bb 100644
--- a/guide/english/certifications/front-end-libraries/sass/use-for-to-create-a-sass-loop/index.md
+++ b/guide/english/certifications/front-end-libraries/sass/use-for-to-create-a-sass-loop/index.md
@@ -27,7 +27,7 @@ Notice that the main difference is that "start to end" **excludes** the end numb
   // some CSS
 }
 
-// 1 2
+// 1 2 3
 ```
 
 * For - to loop:
@@ -36,7 +36,7 @@ Notice that the main difference is that "start to end" **excludes** the end numb
   // some CSS
 }
 
-// 1 2 3
+// 1 2
 ```
 
 3. Guideline from [SASS Guideline](https://sass-guidelin.es/#loops)
@@ -50,9 +50,52 @@ The `@for` loop might be useful when combined with CSS’ `:nth-*` pseudo-classe
   }
 }
 ```
-Always use `$i` as a variable name to stick to the usual convention and unless you have a really good reason to, never use the to keyword: always use through. Many developers do not even know Sass offers this variation; using it might lead to confusion.
+Always use `$i` as a variable name to stick to the usual convention and unless you have a really good reason to, never use the `to` keyword: always use `through`. Many developers do not even know Sass offers this variation; using it might lead to confusion.
 
 Also be sure to respect those guidelines to preserve readability:
 
 * Always an empty new line before `@for`;
 * Always an empty new line after the closing brace (}) unless the next line is a closing brace (}).
+
+## Solution
+```sass
+<style type='text/sass'>
+  @for $j from 1 through 5 {
+    .text-#{$j} { font-size: 10px * $j; }
+  }
+  
+  
+</style>
+
+<p class="text-1">Hello</p>
+<p class="text-2">Hello</p>
+<p class="text-3">Hello</p>
+<p class="text-4">Hello</p>
+<p class="text-5">Hello</p>
+```
+
+The solution above will generate the following CSS:
+
+```css
+.text-1 {
+  font-size: 10px;
+}
+
+.text-2 {
+  font-size: 20px;
+}
+
+.text-3 {
+  font-size: 30px;
+}
+
+.text-4 {
+  font-size: 40px;
+}
+
+.text-5 {
+  font-size: 50px;
+}
+
+```
+
diff --git a/guide/english/certifications/front-end-libraries/sass/use-if-and-else-to-add-logic-to-your-styles/index.md b/guide/english/certifications/front-end-libraries/sass/use-if-and-else-to-add-logic-to-your-styles/index.md
index 83a43271ab..8ef24dacc5 100644
--- a/guide/english/certifications/front-end-libraries/sass/use-if-and-else-to-add-logic-to-your-styles/index.md
+++ b/guide/english/certifications/front-end-libraries/sass/use-if-and-else-to-add-logic-to-your-styles/index.md
@@ -3,8 +3,32 @@ title: Use @if and @else to Add Logic To Your Styles
 ---
 ## Use @if and @else to Add Logic To Your Styles
 
-This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/certifications/front-end-libraries/sass/use-if-and-else-to-add-logic-to-your-styles/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
+## Solution
+```sass
+<style type='text/sass'>
+  @mixin border-stroke($val) {
+    @if $val == light {
+      border: 1px solid black;
+    }
+    @else if $val == medium {
+      border: 3px solid black;
+    }
+    @else if $val == heavy {
+      border: 6px solid black;
+    }
+    @else {
+      border: none;
+    }
+  }
+  
+  #box {
+    width: 150px;
+    height: 150px;
+    background-color: red;
+    @include border-stroke(medium);
+  }  
+</style>
 
-<a href='https://github.com/freecodecamp/guides/blob/master/README.md' target='_blank' rel='nofollow'>This quick style guide will help ensure your pull request gets accepted</a>.
+<div id="box"></div>
 
-<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds  -->
+```