diff --git a/_sass/_vars.scss b/_sass/_vars.scss
new file mode 100644
index 00000000..05ddef71
--- /dev/null
+++ b/_sass/_vars.scss
@@ -0,0 +1,26 @@
+/* Variables */
+
+/* Cards */
+$card-shadow:         0 3px 10px 0 rgba(150, 150, 150, .2);
+$card-succes-border:  rgba(40, 167, 69, .5);
+$card-primary-border: rgba(0, 123, 255, .5);
+$card-warning-border: rgba(255, 193, 7, .5);
+
+/* Blockquote */
+$blockquote-border:   #eee;
+
+/* Share button */
+$share-btn:           #fff;
+$share-btn-shadow:    0 2px 0 0 rgba(0, 0, 0, .2);
+$share-btn-hover:     #eee;
+$share-btn-active:    #e2e2e2;
+
+/* Social */
+$twitter:             #55acee;
+$google:              #dd4b39;
+$facebook:            #3b5998;
+$stumbleupon:         #eb4823;
+$reddit:              #ff5700;
+$linkedin:            #4875b4;
+$email:               #444;
+$diaspora:            #2f3537;
diff --git a/assets/css/style.scss b/assets/css/style.scss
index 5c630448..f3e2ac26 100644
--- a/assets/css/style.scss
+++ b/assets/css/style.scss
@@ -1,6 +1,7 @@
 ---
 ---
 
+@import '_vars';
 @import 'bootstrap';
 @import 'flag-icon';
 @import 'fontawesome';
@@ -9,54 +10,75 @@
 /* BS4 */
 
 .card {
-  box-shadow: 0 3px 10px 0 rgba(150,150,150,0.2) !important;
+  box-shadow: $card-shadow !important;
 }
 
 /* Make links and long strings responsive */
-a, .long-string-list li {
-  word-wrap: break-word;
+a,
+.long-string-list {
+  li {
+    word-wrap: break-word;
+  }
 }
 
-/*.card-success, */ .card-success .card-header {
-  border-color: rgba(40, 167, 69, 0.5) !important;
+/*.card-success, */
+.card-success {
+  .card-header {
+    border-color: $card-succes-border !important;
+  }
 }
 
-/*.card-primary, */ .card-primary .card-header {
-  border-color: rgba(0, 123, 255, 0.5) !important;
+/*.card-primary, */
+.card-primary {
+  .card-header {
+    border-color: $card-primary-border !important;
+  }
 }
 
-/*.card-warning, */ .card-warning .card-header {
-  border-color: rgba(255, 193, 7, 0.5) !important;
+/*.card-warning, */
+.card-warning  {
+  .card-header {
+    border-color: $card-warning-border !important;
+  }
 }
 
 .blockquote {
-  border-left: 5px solid #eee;
-  padding: 10px 20px;
+  border-left: 5px solid $blockquote-border;
   font-size: 1.2rem;
   line-height: 1.35;
+  padding: 10px 20px;
 }
 
-.theme-dropdown .dropdown-menu {
-  position: static;
-  display: block;
-  margin-bottom: 20px;
+.theme-dropdown {
+  .dropdown-menu {
+    display: block;
+    margin-bottom: 20px;
+    position: static;
+  }
 }
 
-.theme-showcase > p > .btn {
-  margin: 5px 0;
+.theme-showcase {
+  p > .btn {
+    margin: 5px 0;
+  }
+
+  .navbar {
+    .container {
+      width: auto;
+    }
+  }
 }
 
-.theme-showcase .navbar .container {
-  width: auto;
-}
 
-.anchor:target {
-  padding-top: 4rem;
-  margin-top: -4rem;
+.anchor {
+  &:target {
+    margin-top: -4rem;
+    padding-top: 4rem;
+  }
 }
 
 .anchor-icon {
-  font-size: 0.8em;
+  font-size: .8em;
 }
 
 .panel-item {
@@ -65,34 +87,35 @@ a, .long-string-list li {
 }
 
 .share-btn {
+  border: 0;
+  box-shadow: $share-btn-shadow;
+  color: $share-btn;
   display: inline-block;
-  color: #ffffff;
-  border: none;
+  opacity: .9;
+  outline: none;
   padding: 1em;
-  width: 8em;
-  opacity: 0.9;
-  box-shadow: 0 2px 0 0 rgba(0,0,0,0.2);
-  outline: none;
   text-align: center;
+  width: 8em;
+
+  &:hover {
+    color: $share-btn-hover;
+  }
+
+  &:active {
+    box-shadow: none;
+    color: $share-btn-active;
+    outline: none;
+    position: relative;
+    top: 2px;
+  }
 }
 
-.share-btn:hover {
-  color: #eeeeee;
-}
+.twitter { background: $twitter; }
+.google-plus { background: $google; }
+.facebook { background: $facebook; }
+.stumbleupon { background: $stumbleupon; }
+.reddit { background: $reddit; }
+.linkedin    { background: $linkedin; }
+.email { background: $email; }
+.diaspora { background: $diaspora; }
 
-.share-btn:active {
-  position: relative;
-  top: 2px;
-  box-shadow: none;
-  color: #e2e2e2;
-  outline: none;
-}
-
-.share-btn.twitter { background: #55acee; }
-.share-btn.google-plus { background: #dd4b39; }
-.share-btn.facebook { background: #3B5998; }
-.share-btn.stumbleupon { background: #EB4823; }
-.share-btn.reddit { background: #ff5700; }
-.share-btn.linkedin    { background: #4875B4; }
-.share-btn.email { background: #444444; }
-.share-btn.diaspora { background: #2f3537; }