Add extend/inherit and operator definitions (#28490)

* Add extend/inherit and operator definitions

* Update index.md

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:
+Example 1:
-```css
+```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/)