From 1e553b3eae1079dfacc2fbd3ee0d08d55b2be1a6 Mon Sep 17 00:00:00 2001
From: jbranchaud <jbranchaud@gmail.com>
Date: Thu, 9 Nov 2017 08:50:43 -0600
Subject: [PATCH] Add Dry Up SCSS With Mixins as a css til

---
 README.md                      |  3 +-
 css/dry-up-scss-with-mixins.md | 59 ++++++++++++++++++++++++++++++++++
 2 files changed, 61 insertions(+), 1 deletion(-)
 create mode 100644 css/dry-up-scss-with-mixins.md

diff --git a/README.md b/README.md
index 42bd23b..2412b8c 100644
--- a/README.md
+++ b/README.md
@@ -10,7 +10,7 @@ smart people at [Hashrocket](http://hashrocket.com/).
 For a steady stream of TILs from a variety of rocketeers, checkout
 [til.hashrocket.com](https://til.hashrocket.com/).
 
-_584 TILs and counting..._
+_585 TILs and counting..._
 
 ---
 
@@ -80,6 +80,7 @@ _584 TILs and counting..._
 
 ### CSS
 
+- [Dry Up SCSS With Mixins](css/dry-up-scss-with-mixins.md)
 - [Lighten And Darken With CSS Brightness Filter](css/lighten-and-darken-with-css-brightness-filter.md)
 - [Lighten And Darken With SCSS](css/lighten-and-darken-with-scss.md)
 
diff --git a/css/dry-up-scss-with-mixins.md b/css/dry-up-scss-with-mixins.md
new file mode 100644
index 0000000..76c7718
--- /dev/null
+++ b/css/dry-up-scss-with-mixins.md
@@ -0,0 +1,59 @@
+# Dry Up SCSS With Mixins
+
+If you have a similar chunk of styling that is being duplicated across your
+CSS, you'd probably like to dry it up to reduce the pain of maintaining it.
+Mixins provide one way of dealing with this problem.
+
+First, declare a named mixin of the styles that you are trying to dry up.
+
+```css
+@mixin navigation {
+  nav {
+    display: flex;
+    justify-content: space-around;
+
+    ul {
+      list-style: none;
+
+      li a {
+        text-decoration: none;
+      }
+    }
+  }
+}
+```
+
+Then, this mixin can be _included_ wherever it is needed.
+
+```css
+div.base-nav {
+  @include nav;
+  background-color: #fff;
+  color: #444;
+
+  nav ul {
+    li a:hover {
+      color: #222;
+    }
+  }
+}
+
+div.admin-nav {
+  @include nav;
+  background-color: #000;
+  color: #fff;
+
+  nav ul {
+    li a:hover {
+      color: #ddd;
+    }
+  }
+}
+```
+
+Any subsequent changes to the core navigation styling only need to be made
+in one place, the mixin.
+
+[source](http://sass-lang.com/guide)
+
+h/t Dorian Karter