A CodePen by Bermon Painter. Nesting - Sass

index.html

<h1>Nesting - Sass</h1>
<p>We have a basic navigation structure that will illustrate how we might translate it to Sass.</p>
<p>In the previous example we were overly specific. We've cleaned up a number of specificity issues.</p>

<nav role="navigation">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Portfolio</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>
    
  

style.scss

@import "compass";
h1 {
  font-size: 20px;
}
nav {
  border-bottom: 1px solid #ccc;
  
  ul {
    list-style: none;
    margin: 0 3%;
    padding: 0;
  }
  
  li {
    display: inline-block;
  }
  
  a {
    background-color: #efefef;
    border: 1px solid #ccc;
    border-bottom-width: 0;
    color: #666;
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
  
  a:hover,
  a:focus{
    background-color: #ccc;
  }
    
  a:active{
    background-color: #666;
    border-color: #666;
    color: #efefef;
  }
}