Updating Mixins block (#28234)

* Updating Mixins block

* Added languages

guide/english/sass/index.md

@@ -12,16 +12,16 @@ With Sass, you can make your CSS considerably more efficient. Some of its key fe
 - **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.
 
+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.
 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
+```sass
 $themeColor: blue; //defines theme color
 $baseFont: 14px; // defines font size
 ```
 
 Now I can use the variable to set color in my website:
-```css
+```sass
 p {
   color: $themeColor;
   font-size: $baseFont;
@@ -29,21 +29,22 @@ p {
 ```
 
 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
+```sass
 $themeColor: red; //changed the color from blue to red
 ```
 
 ## 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
+```html
 <div class="parent">
   <h1>The heading</h1>
 </div>
 ```
 
-In plain CSS, you have to write
+In plain CSS, to style the *parent* element and the heading inside of the *parent* element, you have to write:
 ```css
 .parent {
   background: #e3e3e3;
@@ -53,9 +54,8 @@ In plain CSS, you have to write
   color: #333;
 }
 ```
-
-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
+But in Sass, you can nest one selector inside of the other:
+```sass
 .parent {
   background: #e3e3e3;
   border: 1px solid #c1c3c1;
@@ -65,7 +65,7 @@ to style the *parent* element and the heading inside of the *parent* element. Bu
 }
 ```
 
-which will compile as:
+which would compile to:
 ```css
 .parent {
   background: #e3e3e3;
@@ -79,9 +79,30 @@ which will compile as:
 ## Mixins
 Mixins are like functions for CSS. They allow you to break CSS down into modular chunks that can be reused anywhere in your stylesheets, and this helps us to avoid writing repetitive code. Mixins are created using the `@` symbol and included in other rules using `@include`.
 
+To create a mixin, use the `@mixin` command followed by a space and the name of your mixin.
+
 Example:
-```css
-@mixin box-shadow($x,$y,$blur,$c) {
+
+```sass
+@mixin box-shadow() {   
+  -webkit-box-shadow: 10px 10px 5px 0px;
+  -moz-box-shadow: 10px 10px 5px 0px;
+  -ms-box-shadow: 10px 10px 5px 0px;
+  box-shadow: 10px 10px 5px 0px;
+}
+```
+
+You can now use your mixin like this:
+
+```sass
+.mydiv{
+  @include box-shadow();
+}
+```
+
+Mixins can also take arguements. For example:
+```sass
+@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;
@@ -112,4 +133,4 @@ Example:
 ```
 
 ## Additional Resources
-- [Official Sass website](https://sass-lang.com/)
+- [Official Sass website](https://sass-lang.com/)