From 890d7be1057422c1431d1639254a573380668203 Mon Sep 17 00:00:00 2001
From: Nicole Peery <35229841+nicolepdev@users.noreply.github.com>
Date: Fri, 1 Mar 2019 16:49:07 -0700
Subject: [PATCH] Elaborated on the definition of a mixin and added definition
 of extends with a code example (#28046)

---
 guide/english/sass/index.md | 22 ++++++++++++++++++++--
 1 file changed, 20 insertions(+), 2 deletions(-)

diff --git a/guide/english/sass/index.md b/guide/english/sass/index.md
index 868d41d1b5..01ae0a0820 100644
--- a/guide/english/sass/index.md
+++ b/guide/english/sass/index.md
@@ -76,8 +76,8 @@ which will compile as:
 }
 ```
 
-## MIXINS
-Mixins are like functions for CSS.
+## 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`.
 
 Example:
 ```css
@@ -93,5 +93,23 @@ 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
+.btn--primary {
+  background-color: #333;
+  border-radius: 5px;
+  text-transform: uppercase;
+}
+.btn--callout {
+  @extend .btn;
+}
+.btn--info {
+  @extend .btn;
+}
+```
+
 ## Additional Resources
 - [Official Sass website](https://sass-lang.com/)