Nesting, whitespace.

Author: Florian Kissling

docs/_sass/_examples.scss

@@ -23,19 +23,19 @@
 	color: white;
 	position: relative;
 	padding: 45px 15px 15px;
-  	margin: 0 -15px 15px;
-}
+  margin: 0 -15px 15px;
 
-.s2-event-log:after {
-  content: "Event Log";
-  position: absolute;
-  top: 15px;
-  left: 15px;
-  font-size: 12px;
-  font-weight: bold;
-  color: #BBB;
-  text-transform: uppercase;
-  letter-spacing: 1px;
+  &:after {
+    content: "Event Log";
+    position: absolute;
+    top: 15px;
+    left: 15px;
+    font-size: 12px;
+    font-weight: bold;
+    color: #BBB;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+  }
 }
 
 .s2-example {
@@ -47,6 +47,18 @@
   border-color: #E5E5E5 #EEE #EEE;
   border-style: solid;
   border-width: 1px 0;
+
+  &:after {
+    content: "Example";
+    position: absolute;
+    top: 15px;
+    left: 15px;
+    font-size: 12px;
+    font-weight: bold;
+    color: #BBB;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+  }
 }
 
 @media (min-width: 768px) {
@@ -70,14 +82,4 @@
 	}
 }
 
-.s2-example:after {
-  content: "Example";
-  position: absolute;
-  top: 15px;
-  left: 15px;
-  font-size: 12px;
-  font-weight: bold;
-  color: #BBB;
-  text-transform: uppercase;
-  letter-spacing: 1px;
-}
+

docs/_sass/_footer.scss

@@ -1,4 +1,3 @@
-/* Footer */
 .s2-docs-footer {
   border-top: 1px solid #eee;
   color: #767676;
@@ -20,9 +19,11 @@
       content: "·";
       padding-left: 8px;
     }
+
     &:first-child {
       padding-left: 0;
     }
+
     &:last-child:after {
       content: "";
       padding-left: 0;

docs/_sass/_hamburger.scss

@@ -1,33 +1,44 @@
-/* Animated hamburger icon @see http://codepen.io/JulienMelissas/pen/LEBGLj */
+// animated hamburger icon
+// @see http://codepen.io/JulienMelissas/pen/LEBGLj
+
 .navbar-toggle {
   border: none;
   background: transparent !important;
 
   &:hover {
     background: transparent !important;
   }
+
   .icon-bar {
     width: 22px;
     transition: all 0.2s;
   }
+
   .top-bar {
     transform: rotate(45deg);
     transform-origin: 10% 10%;
   }
+
   .middle-bar {
     opacity: 0;
   }
+
   .bottom-bar {
     transform: rotate(-45deg);
     transform-origin: 10% 90%;
   }
-  &.collapsed .top-bar {
-    transform: rotate(0);
-  }
-  &.collapsed .middle-bar {
-    opacity: 1;
-  }
-  &.collapsed .bottom-bar {
-    transform: rotate(0);
+
+  &.collapsed {
+    .top-bar {
+      transform: rotate(0);
+    }
+
+    .middle-bar {
+      opacity: 1;
+    }
+
+    .bottom-bar {
+      transform: rotate(0);
+    }
   }
 }

docs/_sass/_sidenav.scss

@@ -9,6 +9,7 @@
 .s2-docs-sidebar.affix {
   position: static;
 }
+
 @media (min-width: 768px) {
   .s2-docs-sidebar {
     padding-left: 20px;
@@ -33,10 +34,12 @@
     border-left: 1px solid transparent;
     transition: color .2s, border-color .2s, border-width .2s;
   }
+
   > li > a code {
     background-color: inherit;
     color: inherit;
   }
+
   > li > a:hover,
   > li > a:focus {
     padding-left: 19px;
@@ -45,6 +48,7 @@
     background-color: transparent;
     border-left-color: #428BCA;
   }
+
   > .active > a,
   > .active:hover > a,
   > .active:focus > a {
@@ -60,17 +64,20 @@
     display: none; /* Hide by default, but at >768px, show it */
     padding-bottom: 10px;
   }
+
   .nav > li > a {
     padding-top: 1px;
     padding-bottom: 1px;
     padding-left: 30px;
     font-size: 12px;
     font-weight: normal;
   }
+
   .nav > li > a:hover,
   .nav > li > a:focus {
     padding-left: 30px;
   }
+
   .nav > .active > a,
   .nav > .active:hover > a,
   .nav > .active:focus > a {
@@ -90,11 +97,13 @@
   font-weight: 500;
   color: #999;
 }
+
 .back-to-top:hover,
 .s2-docs-theme-toggle:hover {
   color: #428BCA;
   text-decoration: none;
 }
+
 .s2-docs-theme-toggle {
   margin-top: 0;
 }
@@ -139,6 +148,7 @@
     margin-bottom: 0;
   }
 }
+
 @media (min-width: 1200px) {
   /* Widen the fixed sidebar again */
   .s2-docs-sidebar.affix-bottom,
@@ -147,7 +157,6 @@
   }
 }
 
-
 /* Back to top (hidden on mobile) */
 .back-to-top {
   display: none;
@@ -157,10 +166,11 @@
   font-size: 12px;
   font-weight: 400;
   color: #999;
-}
-.back-to-top:hover {
-  color: #428BCA;
-  text-decoration: none;
+
+  &:hover {
+    color: #428BCA;
+    text-decoration: none;
+  }
 }
 
 @media (min-width: 768px) {