From eddf9063fcf29fc3df55ef015cb5ca4f5ac5143e Mon Sep 17 00:00:00 2001
From: James Hogan <jameshogan92@gmail.com>
Date: Sat, 9 Mar 2019 11:05:05 +0000
Subject: [PATCH] Add extend/inherit and operator definitions (#28490)

* Add extend/inherit and operator definitions

* Update index.md
---
 guide/english/sass/index.md | 38 ++++++++++++++++++++++++++++++++++---
 1 file changed, 35 insertions(+), 3 deletions(-)

diff --git a/guide/english/sass/index.md b/guide/english/sass/index.md
index 3502ad2a4f1..00762606f57 100644
--- a/guide/english/sass/index.md
+++ b/guide/english/sass/index.md
@@ -117,8 +117,8 @@ Mixins can also take arguements. For example:
 ## Extends
 Sometimes you’ll want one selector to share the styles of another selector. The `@extend` directive works like mixins in that you’re able to share snippets of code across your stylesheets. `@extend` is useful for sharing sets of related properties that get repeated in your stylesheets, such as base styles for button sets.
 
-Example:
-```css
+Example 1:
+```sass
 .btn--primary {
   background-color: #333;
   border-radius: 5px;
@@ -132,5 +132,37 @@ Example:
 }
 ```
 
+Example 2:
+```sass
+%success {
+  background-color:green;
+  color:white;
+}
+
+#myDiv {
+  @extend %success;
+  font-size:10px;
+}
+
+#myOtherDiv {
+  @extend %success;
+  font-size:20px;
+}
+```
+Both selectors(`#myDiv` and `#myOtherDiv`) will inherit properties from `%success`, while maintaining their own unique properties.
+
+## Operators
+
+Sass adds mathematical operators, such as +, -, *, / and % to CSS.
+
+Example:
+
+```
+#myDiv {
+  height: 1920px / 480px;
+  width: 1080px * 2;
+}
+```
+
 ## Additional Resources
-- [Official Sass website](https://sass-lang.com/)
\ No newline at end of file
+- [Official Sass website](https://sass-lang.com/)