A CodePen by Bermon Painter. Nesting - CSS

index.html

<h1>Nesting - CSS</h1>
<p>We have a basic navigation structure that will illustrate how we might translate it to Sass. If we were writing normal CSS this is how it would look.</p>
<p>If you look closely at our CSS rules they are overly specific. Whether you're writing CSS or Sass, only be as specific as you have to be. It'll save you many specificity headaches later on.</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;
}
nav ul {
  list-style: none;
  margin: 0 3%;
  padding: 0;
}
nav ul li {
  display: inline-block;
}
nav ul li a {
  background-color: #efefef;
  border: 1px solid #ccc;
  border-bottom-width: 0;
  color: #666;
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}
nav ul li a:hover,
nav ul li a:focus{
  background-color: #ccc;
}
nav ul li a:active{
  background-color: #666;
  border-color: #666;
  color: #efefef;
}