From a852db32065ed44c3dfe65ec308c31aa2461acae Mon Sep 17 00:00:00 2001
From: Krishna Vishwakarma <krish151995@gmail.com>
Date: Wed, 24 Oct 2018 08:57:08 +0530
Subject: [PATCH] Add 'Sass variables,nesting and mixins' (#26833)

---
 guide/english/sass/index.md | 61 ++++++++++++++++++++++++++++++++++++-
 1 file changed, 60 insertions(+), 1 deletion(-)

diff --git a/guide/english/sass/index.md b/guide/english/sass/index.md
index 5e06db178e..e577249a7f 100644
--- a/guide/english/sass/index.md
+++ b/guide/english/sass/index.md
@@ -3,5 +3,64 @@ title: Sass
 ---
 Sass is a preprossessor scripting language that compiles CSS. It essentially brings the power of a standard programming language (e.g. loops, variables, conditional statements, etc...) to your stylesheets.
 
+## Store data with Sass variables:
+
+Variable starts with '$' followed by variable name
+```
+// Sass Code
+$main-fonts:Arial,sans-serif;
+$heading-color:green;
+
+// Css Code
+h1{
+  font-family: $main-fonts;
+  color: $heading-color;
+}
+```
+
+## Nest CSS within SASS:
+
+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;
+}
+
+```
+So the above code in Sass code will be:
+```
+.nav-bar{
+  background-color:green;
+  ul{
+    list-style: none;
+    li{
+      display: inline-block;
+    }
+  }
+}
+```
+
+## MIXINS
+
+Mixins are like functions for CSS.
+Example:
+```
+@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{
+  @include box-shadow(0px,0px,5px,#fff);
+}
+
+```
 #### More Information
-[Official Sass website](https://sass-lang.com/)
\ No newline at end of file
+[Official Sass website](https://sass-lang.com/)