Adds SCSS example

Author: procload

_includes/scss/nesting.scss

@@ -0,0 +1,26 @@
+// Bad example
+.component {
+  color: #333;
+
+  .component-piece {
+    background: #fff;
+
+    .component-subpiece {
+      border: 5px solid #555;
+    }
+  }
+}
+
+
+// Good example
+.component {
+  color: #333;
+
+  .component-piece {
+    background: #fff;
+  }
+
+  .component-subpiece {
+    border: 5px solid #555;
+  }
+}

index.html

@@ -415,6 +415,24 @@ <h3>Organization</h3>
   <h2>SCSS</h2>
 </div>
 
+<div class="section" id="scss-nesting">
+  <div class="col">
+    <h3>Nesting</h3>
+    <ul>
+      <li>Avoid nesting selectors greater than 3 levels deep</li>
+    </ul>
+    <p>Additional reading:</p>
+    <ul>
+      <li><a href="http://markdotto.com/2012/02/16/scope-css-classes-with-prefixes/">Scope CSS classes with prefixes</a></li>
+      <li><a href="http://markdotto.com/2012/03/02/stop-the-cascade/">Stop the cascade</a></li>
+    </ul>
+  </div>
+  <div class="col">
+    {% highlight scss %}{% include scss/nesting.scss %}{% endhighlight %}
+  </div>
+</div>
+
+
 <div class="section" id="css-editor-prefs">
   <div class="col">
     <h3>Editor preferences</h3>