SCSS nesting

Practicing nesting in SCSS

by sendil J

HTML

<ul>
  <li><a href="">one</a></li>
  <li><a href="">two</a></li>
  <li><a href="">three</a></li>
</ul>

SCSS

ul {
  list-style: none;
  li {
    padding: 15px;
    display: inline-block;
    background-color: #112233;
    a {
      text-decoration: none;
      font-size: 1em;
      color: #aaddcc;
    }
  }
}