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  -->
+```