use sass selector nesting for styles

site/_sass/_style.scss

@@ -31,7 +31,9 @@ body {
 
 /* Sections */
 
-header, section, footer {
+header,
+section,
+footer {
   float: left;
   width: 100%;
   clear: both;
@@ -39,32 +41,33 @@ header, section, footer {
 
 /* Header */
 
-header h1, header nav {
+header {
-  display: inline-block;
+
+  h1,
+  nav { display: inline-block; }
+
+  h1 {
+    span { display: none; }
+  }
 }
 
-header h1 span {
+nav {
-  display: none;
-}
 
-nav ul {
+  ul {
     padding: 0;
     margin: 0;
   }
 
-nav li {
+  li { display: inline-block; }
-  display: inline-block;
 }
 
 .main-nav {
   margin-top: 52px;
-}
 
-.main-nav li {
+  li {
     margin-right: 10px;
-}
 
-.main-nav li a {
+    a {
       -webkit-border-radius: 5px;
       -moz-border-radius: 5px;
       border-radius: 5px;
@@ -77,17 +80,19 @@ nav li {
       -moz-transition: all .25s;
       -o-transition: all .25s;
       transition: all .25s;
-}
 
-.main-nav li a:hover {
+      &:hover {
         background-color: #252525;
         -webkit-box-shadow: inset 0 1px 3px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.1);
         -moz-box-shadow: inset 0 1px 3px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.1);
         box-shadow: inset 0 1px 3px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.1);
         text-shadow: 0 1px 3px rgba(0,0,0,.5);
       }
+    }
 
-.main-nav li.current a {
+    &.current {
+
+      a {
         background-color: #fc0;
         color: #222;
         -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 1px 5px rgba(0,0,0,.5);
@@ -95,14 +100,19 @@ nav li {
         box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 1px 5px rgba(0,0,0,.5);
         text-shadow: 0 1px 0 rgba(255,255,255,.3);
       }
+    }
+  }
+}
 
-.mobile-nav ul {
+.mobile-nav {
+
+  ul {
     overflow: hidden;
     width: 100%;
     display: table;
   }
 
-.mobile-nav a {
+  a {
     float: left;
     width: 100%;
     background-color: #333;
@@ -117,7 +127,15 @@ nav li {
     border-radius: 5px;
   }
 
-.mobile-nav .current a {
+  li {
+    display: table-cell;
+    width: 20%;
+    padding: 8px 2px;
+  }
+
+  .current {
+
+    a {
       background-color: #fc0;
       color: #222;
       -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 1px 5px rgba(0,0,0,.5);
@@ -125,11 +143,7 @@ nav li {
       box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 1px 5px rgba(0,0,0,.5);
       text-shadow: 0 1px 0 rgba(255,255,255,.3);
     }
-
+  }
-.mobile-nav li {
-  display: table-cell;
-  width: 20%;
-  padding: 8px 2px;
 }
 
 @media (max-width: 768px) {
@@ -138,11 +152,9 @@ nav li {
   }
 }
 @media (max-width: 830px) {
-  .main-nav .show-on-mobiles {
+  .main-nav {
-    display: inline;
+    .show-on-mobiles { display: inline; }
-  }
+    .hide-on-mobiles { display: none; }
-  .main-nav .hide-on-mobiles {
-    display: none;
   }
 }
 
@@ -154,17 +166,23 @@ footer {
   padding-bottom: 5px;
   color: #888;
   margin-top: 40px;
-}
 
-footer a {
+  a {
     color: #fff;
+
+    &:hover {
+
+      img { opacity: 1; }
+    }
   }
 
-footer .align-right p, footer img {
+  .align-right {
+
+    p { display: inline-block; }
+  }
+
+  img {
     display: inline-block;
-}
-
-footer img {
     position: relative;
     top: 8px;
     margin-left: 5px;
@@ -175,36 +193,30 @@ footer img {
     -o-transition: opacity .2s;
     transition: opacity .2s;
   }
-
-footer a:hover img {
-  opacity: 1;
 }
 
 @media (max-width: 568px) {
-  footer .one-third p {
+  footer {
-    margin-bottom: 0;
+    .one-third p { margin-bottom: 0; }
-  }
+    .two-thirds p { margin-top: -20px; }
-  footer .two-thirds p {
-    margin-top: -20px;
   }
 }
 
 /* Intro */
 
-.intro .unit {
+.intro {
-  padding: 10px 0 40px;
-}
 
-.intro p {
+  .unit { padding: 10px 0 40px; }
+
+  p {
     font-size: 1.75em;
     line-height: 1em;
     margin: 0;
   }
+}
 
 @media (min-width: 569px) {
-  .intro p {
+  .intro p { font-size: 3.2em; }
-    font-size: 3.2em;
-  }
 }
 
 /* Quickstart */
@@ -216,47 +228,50 @@ footer a:hover img {
   -webkit-box-shadow: inset 0 3px 10px rgba(0,0,0,.4);
   -moz-box-shadow: inset 0 3px 10px rgba(0,0,0,.4);
   box-shadow: inset 0 3px 10px rgba(0,0,0,.4);
-}
 
-.quickstart .content {
+  .content { padding: 0; }
-  padding: 0;
-}
 
-.quickstart h4 {
+  h4 {
     font-size: 24px;
     line-height: 24px;
     margin-top: 20px;
     text-shadow: 0 1px 3px rgba(0,0,0,.8);
   }
 
-.quickstart .code {
+  .code {
     font-size: 12px;
     display: block;
     margin: 0 0 -30px;
   }
+}
 
 @media (min-width: 768px) {
-  .quickstart .code {
+  .quickstart {
+
+    .code {
       font-size: 18px;
       margin: -30px 0;
       float: right;
     }
-  .quickstart h4 {
+
+    h4 {
       margin: 50px 0 0;
       text-align: center;
     }
   }
+}
 
 /* Code */
 
-.quickstart .code {
+.quickstart {
+
+  .code {
     display: block;
     padding: 0;
     font-family: Menlo, Consolas, "Courier New", Courier, "Liberation Mono", monospace;
     line-height: 1.3em;
-}
 
-.quickstart .code .title {
+    .title {
       display: block;
       text-align: center;
       margin: 0 20px;
@@ -281,7 +296,7 @@ footer a:hover img {
       border-bottom: 1px solid #111;
     }
 
-.quickstart .code .shell {
+    .shell  {
       padding: 20px;
       text-shadow: none;
       margin: 0 20px;
@@ -294,17 +309,15 @@ footer a:hover img {
       box-shadow: 0 5px 30px rgba(0,0,0,.3);
     }
 
-.quickstart .code .line {
+    .line {
       display: block;
       margin: 0;
       padding: 0;
+
+      span { display: inline-block; }
     }
 
-.quickstart .code .line span {
+    .path {
-  display: inline-block;
-}
-
-.quickstart .code .path {
       color: #87ceeb;
       -webkit-user-select: none;  /* Chrome all / Safari all */
       -moz-user-select: none;     /* Firefox all */
@@ -313,7 +326,7 @@ footer a:hover img {
       user-select: none;
     }
 
-.quickstart .code .prompt {
+    .prompt {
       color: #cd5c5c;
       -webkit-user-select: none;  /* Chrome all / Safari all */
       -moz-user-select: none;     /* Firefox all */
@@ -322,17 +335,17 @@ footer a:hover img {
       user-select: none;
     }
 
-.quickstart .code .command {
+    .command { color: #f0e68c; }
-  color: #f0e68c;
-}
 
-.quickstart .code .output {
+    .output { color: #888; }
-  color: #888;
+  }
 }
 
 /* Free Hosting */
 
-.free-hosting .pane {
+.free-hosting {
+
+  .pane {
     background-color: #444;
     -webkit-border-radius: 10px;
     -moz-border-radius: 10px;
@@ -342,41 +355,39 @@ footer a:hover img {
     padding: 0 20px 30px;
   }
 
-.free-hosting img {
+  img {
     margin: -30px 0 0;
     width: 180px;
     height: 150px;
   }
 
-.free-hosting h2 {
+  h2 { font-size: 28px; }
-  font-size: 28px;
-}
 
-.free-hosting p,
+  p,
-.free-hosting a {
+  a { font-size: 16px; }
-  font-size: 16px;
-}
 
-.free-hosting p {
+  p { margin: .75em 0; }
-  margin: .75em 0;
 }
 
 @media (min-width: 768px) {
-  .free-hosting img {
+  .free-hosting {
+
+    img {
       float: left;
       margin: -20px -30px -30px -50px;
       width: 300px;
       height: 251px;
     }
-  .free-hosting .pane-content {
+
+    .pane-content {
       margin-top: 35px;
       padding-right: 30px;
     }
-  .free-hosting p,
+
-  .free-hosting a {
+    p,
-    font-size: 18px;
+    a { font-size: 18px; }
-  }
+
-  .free-hosting .pane:after {
+    .pane:after {
       content: " ";
       float: right;
       background: url(../img/footer-arrow.png) top left no-repeat;
@@ -387,6 +398,7 @@ footer a:hover img {
       bottom: -30px;
     }
   }
+}
 
 /* Article - Used for both docs and news */
 
@@ -405,15 +417,11 @@ article {
 }
 
 @media (max-width: 480px) {
-  article ul {
+  article ul { padding-left: 20px; }
-    padding-left: 20px;
-  }
 }
 
 @media (max-width: 568px) {
-  article {
+  article { margin: 0; }
-    margin: 0;
-  }
 }
 
 @media (min-width: 768px) {
@@ -427,9 +435,8 @@ article {
 
 aside {
   padding-top: 30px;
-}
 
-aside h4 {
+  h4 {
     text-transform: uppercase;
     font-size: 14px;
     font-weight: 700;
@@ -439,24 +446,21 @@ aside h4 {
     border-bottom: 1px solid #c00;
   }
 
-aside ul {
+  ul {
     padding-left: 0;
+
+    &:first-child { margin-top: 0; }
   }
 
-aside ul:first-child {
+  li {
-  margin-top: 0;
-}
-
-aside li {
     list-style-type: none;
-}
 
-aside li a {
+    a {
       font-size: 16px;
       position: relative
     }
 
-aside li.current a:before {
+    &.current a:before {
       content: "";
       border-color: transparent transparent transparent #444;
       border-style: solid;
@@ -467,15 +471,16 @@ aside li.current a:before {
       top: 0;
       left: -30px;
     }
+  }
+}
 
 /* Documentation */
 
-.docs article {
+.docs {
-  min-height: 800px;
-}
 
-.docs .content {
+  article { min-height: 800px; }
-  padding: 0;
+
+  .content { padding: 0; }
 }
 
 .section-nav {
@@ -484,13 +489,11 @@ aside li.current a:before {
   position: relative;
   background: url(../img/article-footer.png) top center no-repeat;
   margin: 40px -20px 10px;
-}
 
-.section-nav > div {
+  > div { width: 49.5%; }
-  width: 49.5%;
-}
 
-.section-nav a, .section-nav span {
+  a,
+  span {
     color: #fff;
     font-size: 16px;
     text-transform: uppercase;
@@ -506,16 +509,16 @@ aside li.current a:before {
     background-color: #777;
   }
 
-.section-nav a:hover {
+  a:hover {
     color: #fff;
     background-color: #888;
   }
 
-.section-nav .next, .section-nav .prev {
+  .next,
-  position: relative;
+  .prev { position: relative; }
-}
 
-.section-nav .next:after, .section-nav .prev:before {
+  .next:after,
+  .prev:before {
     font-size: 36px;
     color: #222;
     font-weight: 900;
@@ -524,31 +527,27 @@ aside li.current a:before {
     top: -7px;
   }
 
-.section-nav .next:after {
+  .next:after {
     content: '\203A';
     right: 10px;
   }
 
-.section-nav .prev:before {
+  .prev:before {
     content: '\2039';
     left: 10px;
   }
 
-.section-nav .prev, .section-nav .prev:hover {
+  .prev,
-  /*float: left;*/
+  .prev:hover { padding-left: 30px; }
-  padding-left: 30px;
-}
 
-.section-nav .next, .section-nav .next:hover {
+  .next,
-  /*float: right;*/
+  .next:hover { padding-right: 30px; }
-  padding-right: 30px;
-}
 
-.section-nav .disabled {
+  .disabled {
     opacity: .5;
-  /*filter: alpha*/
     cursor: default;
   }
+}
 
 .docs-nav-mobile select {
   color: #000;
@@ -557,9 +556,7 @@ aside li.current a:before {
 
 /* News */
 
-article h2:first-child {
+article h2:first-child { margin-top: 0; }
-  margin-top: 0;
-}
 
 .post-category,
 .post-meta {
@@ -588,32 +585,8 @@ article h2:first-child {
   background-image: -o-linear-gradient(top, #9e2812 0%, #6f0d0d 100%);
   background-image: linear-gradient(to bottom, #9e2812 0%,#6f0d0d 100%);
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9e2812', endColorstr='#6f0d0d',GradientType=0 );
-}
 
-.post-content img {
+  &:before {
-  max-width: 100%
-}
-
-.label {
-  float: left;
-  text-transform: uppercase;
-  font-weight: 700;
-  text-shadow: 0 -1px 0 rgba(0,0,0,.5);
-}
-
-@media (max-width: 568px) {
-  .post-category {
-    padding-left: 30px;
-  }
-}
-
-@media (min-width: 768px) {
-  .post-category {
-    margin-left: -50px;
-  }
-}
-
-.post-category:before {
     content: "";
     position: absolute;
     top: -10px;
@@ -624,6 +597,24 @@ article h2:first-child {
     width: 0;
     height: 0;
   }
+}
+
+.post-content img { max-width: 100% }
+
+.label {
+  float: left;
+  text-transform: uppercase;
+  font-weight: 700;
+  text-shadow: 0 -1px 0 rgba(0,0,0,.5);
+}
+
+@media (max-width: 568px) {
+  .post-category { padding-left: 30px; }
+}
+
+@media (min-width: 768px) {
+  .post-category { margin-left: -50px; }
+}
 
 .avatar {
   -webkit-border-radius: 3px;
@@ -641,9 +632,7 @@ article h2:first-child {
 }
 
 .post-date,
-.post-author {
+.post-author { margin-left: 10px; }
-  margin-left: 10px;
-}
 
 .news article + article {
   margin-top: -10px;
@@ -659,7 +648,8 @@ article h2:first-child {
 /* Code Highlighting */
 
 
-pre, code {
+pre,
+code {
   white-space: pre;
   display: inline-block;
   margin: 0;
@@ -668,12 +658,16 @@ pre, code {
 }
 
 @media (min-width: 768px) {
-  pre, code {
+  pre, code { font-size: 16px; }
-    font-size: 16px;
-  }
 }
 
-.highlight, p > pre, p > code, p > nobr > code, li > code, h5 > code, .note > code {
+.highlight,
+p > pre,
+p > code,
+p > nobr > code,
+li > code,
+h5 > code,
+.note > code {
   background-color: #333;
   color: #fff;
   -webkit-border-radius: 5px;
@@ -707,9 +701,7 @@ pre, code {
 
 /* HTML Elements */
 
-h1, h2, h3, h4, h5, h6 {
+h1, h2, h3, h4, h5, h6 { margin: 0; }
-  margin: 0;
-}
 
 a {
   color: #fc0;
@@ -718,19 +710,13 @@ a {
   -moz-transition: all .25s;
   -o-transition: all .25s;
   transition: all .25s;
+
+  &:hover { color: #f90; }
 }
 
-a:hover {
+strong { font-weight: 700; }
-  color: #f90;
-}
 
-strong {
+p { line-height: 1.5em; }
-  font-weight: 700;
-}
-
-p {
-  line-height: 1.5em;
-}
 
 .left { float: left; }
 .right { float: right; }
@@ -740,16 +726,25 @@ p {
 
 /* Article HTML */
 
-article h2,
+article {
-article h3,
+
-article h4,
+  h2, h3, h4, h5, h6 { margin: 1em 0; }
-article h5,
+
-article h6 {
+  h4 { color: #fff; }
-  margin: 1em 0;
+
+  ul li {
+
+    p { margin: 0; }
+
+    blockquote { margin: 10px 0; }
+  }
+
+  ul li,
+  ol li {
+    line-height: 1.5em;
+    margin-bottom: 0.5em;
   }
 
-article h4 {
-  color: #fff;
 }
 
 h5, h6 {
@@ -757,19 +752,6 @@ h5, h6 {
   font-style: italic;
 }
 
-article ul li p {
-  margin: 0;
-}
-
-article ul li, article ol li {
-  line-height: 1.5em;
-  margin-bottom: 0.5em;
-}
-
-article ul li blockquote {
-  margin: 10px 0;
-}
-
 blockquote {
   border-left: 2px solid #777;
   padding-left: 20px;
@@ -809,34 +791,30 @@ thead {
   background-image: -o-linear-gradient(top, #3a3a3a 0%, #1e1e1e 100%);
   background-image: linear-gradient(to bottom, #3a3a3a 0%,#1e1e1e 100%);
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3a3a3a', endColorstr='#1e1e1e',GradientType=0 );
-}
 
-thead th {
+  th {
     position: relative;
     -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
     -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
     box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
-}
 
-thead th:first-child {
+    &:first-child {
       -webkit-border-top-left-radius: 5px;
       -moz-border-radius-topleft: 5px;
       border-top-left-radius: 5px;
     }
 
-thead th:last-child {
+    &:last-child {
       -webkit-border-top-right-radius: 5px;
       -moz-border-radius-topright: 5px;
       border-top-right-radius: 5px;
     }
-
+  }
-td {
-  padding: .5em .75em;
 }
 
-td p {
+td { padding: .5em .75em; }
-  margin: 0;
+
-}
+td p { margin: 0; }
 
 th {
   text-transform: uppercase;
@@ -859,25 +837,32 @@ tbody td {
   background-image: -o-linear-gradient(top, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 100%);
   background-image: linear-gradient(to bottom, rgba(255,255,255,0.1) 0%,rgba(255,255,255,0) 100%);
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1affffff', endColorstr='#00ffffff',GradientType=0 );
-}
 
-td p {
+  p {
     font-size: 16px;
+
+    code { font-size: 14px; }
+  }
 }
 
-td p code {
+code.option,
-  font-size: 14px;
+th .option,
-}
+code.filter,
-
+th .filter {
-code.option, th .option, code.filter, th .filter {
   color: #50B600;
 }
 
-code.flag, th .flag, code.output, th .output {
+code.flag,
+th .flag,
+code.output,
+th .output {
   color: #049DCE;
 }
 
-code.option, code.flag, code.filter, code.output {
+code.option,
+code.flag,
+code.filter,
+code.output {
   margin-bottom: 2px;
 }
 
@@ -906,18 +891,15 @@ code.option, code.flag, code.filter, code.output {
 }
 
 @media (max-width: 568px) {
-  .note {
+  .note { margin-right: -30px; }
-    margin-right: -30px;
-  }
 }
 
 @media (min-width: 768px) {
-  .note {
+  .note { margin-left: -50px; }
-    margin-left: -50px;
-  }
 }
 
-.note:before {
+.note {
+  &:before {
     content: "";
     position: absolute;
     top: -10px;
@@ -929,22 +911,35 @@ code.option, code.flag, code.filter, code.output {
     height: 0;
   }
 
-.note h5, .note p {
+  h5,
+  p {
     margin: 0;
     color: #fff;
   }
 
-.note h5 {
+  h5 {
     line-height: 1.5em;
     font-weight: 900;
     font-style: normal;
   }
 
-.note p {
+  p {
     font-weight: 400;
     font-size: .75em;
   }
 
+  &:after {
+    content: '\2605';
+    color: #fc0;
+    position: absolute;
+    top: 14px;
+    left: 14px;
+    font-size: 28px;
+    font-weight: 700;
+    text-shadow: 0 -1px 0 rgba(0,0,0,.5);
+  }
+}
+
 .info {
   background-color: #0389aa;
   background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAzODlhYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDYxN2YiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
@@ -978,28 +973,11 @@ code.option, code.flag, code.filter, code.output {
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cd9239', endColorstr='#a27528',GradientType=0 );
 }
 
-.info:before {
+.info:before { border-color: transparent #00617f #00617f transparent; }
-  border-color: transparent #00617f #00617f transparent;
-}
 
-.warning:before {
+.warning:before { border-color: transparent #6f0d0d #6f0d0d transparent; }
-  border-color: transparent #6f0d0d #6f0d0d transparent;
-}
 
-.unreleased:before {
+.unreleased:before { border-color: transparent #664719 #664719 transparent; }
-  border-color: transparent #664719 #664719 transparent;
-}
-
-.note:after {
-  content: '\2605';
-  color: #fc0;
-  position: absolute;
-  top: 14px;
-  left: 14px;
-  font-size: 28px;
-  font-weight: 700;
-  text-shadow: 0 -1px 0 rgba(0,0,0,.5);
-}
 
 .info:after {
   content: '\24D8';