From e3529a8449a92e6fa4ec7c9de4571a5382f51dcc Mon Sep 17 00:00:00 2001
From: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>
Date: Wed, 1 May 2019 01:55:22 +0200
Subject: [PATCH] fix: Add solutions for Sass challenges (#35777)

---
 ...l-a-condition-is-met-with-while.english.md | 21 ++++++++++++--
 ...create-reusable-css-with-mixins.english.md | 20 +++++++++++--
 ...f-css-styles-to-another-element.english.md | 29 +++++++++++++++++--
 .../sass/nest-css-with-sass.english.md        | 19 ++++++++++--
 ...to-smaller-chunks-with-partials.english.md |  5 ++--
 .../store-data-with-sass-variables.english.md | 27 +++++++++++++++--
 ...lse-to-add-logic-to-your-styles.english.md | 29 +++++++++++++++++--
 7 files changed, 136 insertions(+), 14 deletions(-)

diff --git a/curriculum/challenges/english/03-front-end-libraries/sass/apply-a-style-until-a-condition-is-met-with-while.english.md b/curriculum/challenges/english/03-front-end-libraries/sass/apply-a-style-until-a-condition-is-met-with-while.english.md
index d0a555d43ca..83b88f8901b 100644
--- a/curriculum/challenges/english/03-front-end-libraries/sass/apply-a-style-until-a-condition-is-met-with-while.english.md
+++ b/curriculum/challenges/english/03-front-end-libraries/sass/apply-a-style-until-a-condition-is-met-with-while.english.md
@@ -88,7 +88,24 @@ tests:
 ## Solution
 <section id='solution'>
 
-```js
-// solution required
+```html
+<style type='text/sass'>
+$x: 1;
+@while $x <= 10 {
+    .text-#{$x} { font-size: 5px * $x; }
+    $x: $x + 1;
+}
+</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>
+<p class="text-6">Hello</p>
+<p class="text-7">Hello</p>
+<p class="text-8">Hello</p>
+<p class="text-9">Hello</p>
+<p class="text-10">Hello</p>
 ```
 </section>
diff --git a/curriculum/challenges/english/03-front-end-libraries/sass/create-reusable-css-with-mixins.english.md b/curriculum/challenges/english/03-front-end-libraries/sass/create-reusable-css-with-mixins.english.md
index 462af4c17fd..d2741fee79f 100644
--- a/curriculum/challenges/english/03-front-end-libraries/sass/create-reusable-css-with-mixins.english.md
+++ b/curriculum/challenges/english/03-front-end-libraries/sass/create-reusable-css-with-mixins.english.md
@@ -75,7 +75,23 @@ tests:
 ## Solution
 <section id='solution'>
 
-```js
-// solution required
+```html
+<style type='text/sass'>
+  @mixin border-radius($radius) {
+    -webkit-border-radius: $radius;
+    -moz-border-radius: $radius;
+    -ms-border-radius: $radius;
+    border-radius: $radius;
+  }
+
+  #awesome {
+    width: 150px;
+    height: 150px;
+    background-color: green;
+    @include border-radius(15px);
+  }
+</style>
+
+<div id="awesome"></div>
 ```
 </section>
diff --git a/curriculum/challenges/english/03-front-end-libraries/sass/extend-one-set-of-css-styles-to-another-element.english.md b/curriculum/challenges/english/03-front-end-libraries/sass/extend-one-set-of-css-styles-to-another-element.english.md
index 3512e7d6a0a..598f41b70a7 100644
--- a/curriculum/challenges/english/03-front-end-libraries/sass/extend-one-set-of-css-styles-to-another-element.english.md
+++ b/curriculum/challenges/english/03-front-end-libraries/sass/extend-one-set-of-css-styles-to-another-element.english.md
@@ -74,7 +74,32 @@ tests:
 ## Solution
 <section id='solution'>
 
-```js
-// solution required
+```html
+<style type='text/sass'>
+  h3{
+    text-align: center;
+  }
+  .info{
+    width: 200px;
+    border: 1px solid black;
+    margin: 0 auto;
+  }
+  .info-important{
+    @extend .info;
+    background-color: magenta;
+  }
+
+
+
+</style>
+<h3>Posts</h3>
+<div class="info-important">
+  <p>This is an important post. It should extend the class ".info" and have its own CSS styles.</p>
+</div>
+
+<div class="info">
+  <p>This is a simple post. It has basic styling and can be extended for other uses.</p>
+</div>
+
 ```
 </section>
diff --git a/curriculum/challenges/english/03-front-end-libraries/sass/nest-css-with-sass.english.md b/curriculum/challenges/english/03-front-end-libraries/sass/nest-css-with-sass.english.md
index eebf8c0eb4f..86aa1b5039b 100644
--- a/curriculum/challenges/english/03-front-end-libraries/sass/nest-css-with-sass.english.md
+++ b/curriculum/challenges/english/03-front-end-libraries/sass/nest-css-with-sass.english.md
@@ -64,7 +64,22 @@ tests:
 ## Solution
 <section id='solution'>
 
-```js
-// solution required
+```html
+<style type='text/sass'>
+  .blog-post {
+    h1 {
+      text-align: center;
+      color: blue;
+    }
+    p {
+      font-size: 20px;
+    }
+  }
+</style>
+
+<div class="blog-post">
+  <h1>Blog Title</h1>
+  <p>This is a paragraph</p>
+</div>
 ```
 </section>
diff --git a/curriculum/challenges/english/03-front-end-libraries/sass/split-your-styles-into-smaller-chunks-with-partials.english.md b/curriculum/challenges/english/03-front-end-libraries/sass/split-your-styles-into-smaller-chunks-with-partials.english.md
index a4010ab2eae..6cf99738c56 100644
--- a/curriculum/challenges/english/03-front-end-libraries/sass/split-your-styles-into-smaller-chunks-with-partials.english.md
+++ b/curriculum/challenges/english/03-front-end-libraries/sass/split-your-styles-into-smaller-chunks-with-partials.english.md
@@ -52,7 +52,8 @@ tests:
 ## Solution
 <section id='solution'>
 
-```js
-// solution required
+```html
+// The main.scss file
+@import 'variables'
 ```
 </section>
diff --git a/curriculum/challenges/english/03-front-end-libraries/sass/store-data-with-sass-variables.english.md b/curriculum/challenges/english/03-front-end-libraries/sass/store-data-with-sass-variables.english.md
index 6864e2f024d..7932fe118a2 100644
--- a/curriculum/challenges/english/03-front-end-libraries/sass/store-data-with-sass-variables.english.md
+++ b/curriculum/challenges/english/03-front-end-libraries/sass/store-data-with-sass-variables.english.md
@@ -77,7 +77,30 @@ tests:
 ## Solution
 <section id='solution'>
 
-```js
-// solution required
+```html
+<style type='text/sass'>
+  $text-color: red;
+
+  .header{
+    text-align: center;
+  }
+  .blog-post, h2 {
+    color: $text-color;
+  }
+</style>
+
+<h1 class="header">Learn Sass</h1>
+<div class="blog-post">
+  <h2>Some random title</h2>
+  <p>This is a paragraph with some random text in it</p>
+</div>
+<div class="blog-post">
+  <h2>Header #2</h2>
+  <p>Here is some more random text.</p>
+</div>
+<div class="blog-post">
+  <h2>Here is another header</h2>
+  <p>Even more random text within a paragraph</p>
+</div>
 ```
 </section>
diff --git a/curriculum/challenges/english/03-front-end-libraries/sass/use-if-and-else-to-add-logic-to-your-styles.english.md b/curriculum/challenges/english/03-front-end-libraries/sass/use-if-and-else-to-add-logic-to-your-styles.english.md
index f74bbdcc15b..211ee119542 100644
--- a/curriculum/challenges/english/03-front-end-libraries/sass/use-if-and-else-to-add-logic-to-your-styles.english.md
+++ b/curriculum/challenges/english/03-front-end-libraries/sass/use-if-and-else-to-add-logic-to-your-styles.english.md
@@ -69,7 +69,32 @@ tests:
 ## Solution
 <section id='solution'>
 
-```js
-// solution required
+```html
+<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>
+
+<div id="box"></div>
 ```
 </section>