From 47ccf0ff8e5357db974a96900e96e60e27cd1df5 Mon Sep 17 00:00:00 2001
From: Prajwal Bajracharya <34180536+bajracharya1994@users.noreply.github.com>
Date: Wed, 6 Feb 2019 01:00:44 +0545
Subject: [PATCH] Explain Variables in Sass (#27112)

* Explain Variables in Sass

* Explain nesting in Sass
---
 guide/english/sass/index.md | 109 ++++++++++++++++++++++--------------
 1 file changed, 66 insertions(+), 43 deletions(-)

diff --git a/guide/english/sass/index.md b/guide/english/sass/index.md
index e81322fc28..8ca4f117f8 100644
--- a/guide/english/sass/index.md
+++ b/guide/english/sass/index.md
@@ -1,74 +1,97 @@
 ---
 title: Sass
 ---
+
 Sass is a preprocessor scripting language that compiles CSS. It essentially brings the power of a standard programming language to your stylesheets. Sass files end with the `.scss` file extension. 
 
 With Sass, you can make your CSS considerably more efficient. Some of its key features include:
+- **nesting** which allows you to order child elements inside of their parents on your stylesheet
+- **mixins** which allow you to apply the same style to multiple elements without having to copy and paste 
+- **for**, **if**, and **else** statements which allow you to apply styles only in specific conditions
+- **partials** which allow you to take chunks of your CSS and import them into other `.scss` stylesheets
+- **extend** which allows you to take the style from one element into another
 
-1. **mixins**, which allow you to apply the same style to multiple elements without having to copy and paste 
-2. **for**, **if**, and **else** statements, which allow you to apply styles only in specific conditions
-3. **partials**, which allow you to take chunks of your CSS and import them into other `.scss` stylesheets
-4. **nesting**, which allows you to order child elements inside of their parents on your stylesheet
-5. **extend**, which allows you to take the style from one element into another
+## Store data with Sass variables
+One of the main features of Sass is its ability to define variables. You can define variables for almost anything such as color, font, units, etc.
 
-## Store data with Sass variables:
-
-Variable starts with '$' followed by variable name
+Variables can be defined in Sass by using the `$` and variable name. (e.g., if I want my website's theme color to be blue. I can write:
+```css
+$themeColor: blue; //defines theme color
+$baseFont: 14px; // defines font size
 ```
-// Sass Code
-$main-fonts:Arial,sans-serif;
-$heading-color:green;
 
-// Css Code
-h1{
-  font-family: $main-fonts;
-  color: $heading-color;
+Now I can use the variable to set color in my website:
+```css
+p {
+  color: $themeColor;
+  font-size: $baseFont;
 }
 ```
 
-## Nest CSS within SASS:
+And it also makes it easier to change the theme color of my website without having to change the color *blue* in every element style. I can simply change the variable value:
+```css
+$themeColor: red; //changed the color from blue to red
+```
 
-On normal CSS codes we have to write each elements css seperate like:
-```
-.nav-bar{
-  background-color: green;
-}
-.nav-bar ul{
-  list-style : none;
-}
-.nav-bar ul li{
-  display: inline-block;
-}
+## Nest CSS within SASS
+Another great feature of Sass is nesting. Nesting saves you from having to write too much code. If you have an element inside of another element, you don't have to write more lines of code to target the child element. It can be understood with and example.
 
+Suppose you have a heading element inside of a div with a class of *parent*.
+```css
+<div class="parent">
+  <h1>The heading</h1>
+</div>
 ```
-So the above code in Sass code will be:
+
+In plain CSS, you have to write
+```css
+.parent {
+  background: #e3e3e3;
+  border: 1px solid #c1c3c1;
+}
+.parent h1 {
+  color: #333;
+}
 ```
-.nav-bar{
-  background-color:green;
-  ul{
-    list-style: none;
-    li{
-      display: inline-block;
-    }
-  }
+
+to style the *parent* element and the heading inside of the *parent* element. But in Sass, you can nest one selector inside of the other:
+```css
+.parent {
+  background: #e3e3e3;
+  border: 1px solid #c1c3c1;
+   h1 {                       //nested inside .parent element
+     color: #333;
+   }
+}
+```
+
+which will compile as:
+```css
+.parent {
+  background: #e3e3e3;
+  border: 1px solid #c1c3c1;
+}
+.parent h1 {
+  color: #333;
 }
 ```
 
 ## MIXINS
-
 Mixins are like functions for CSS.
+
 Example:
-```
-@mixin box-shadow($x,$y,$blur,$c){
+```css
+@mixin box-shadow($x,$y,$blur,$c) {
   -webkit-box-shadow: $x,$y,$blur,$c;
   -moz-box-shadow: $x,$y,$blur,$c;
   -ms-box-shadow: $x,$y,$blur,$c;
    box-shadow: $x,$y,$blur,$c;
 }
-.mydiv{
+
+.mydiv {
   @include box-shadow(0px,0px,5px,#fff);
 }
-
 ```
-#### More Information
-[Official Sass website](https://sass-lang.com/)
+
+## Additional Resources
+- [Official Sass website](https://sass-lang.com/)