Sass Nesting Example 1

SassMeister-input-HTML.html

<nav class="nav">
  <ul>
    <li>
      <a href="#">Home</a>
      <a href="#">Page 1</a>
      <a href="#">Page 2</a>
    </li>
  </ul>
</nav>

SassMeister-input.scss

// ----
// Sass (v3.4.14)
// Compass (v1.0.3)
// ----

.nav {
  background-color: #ededed;
  
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  
  li {
    display: inline-block;
  }
  
  a {
    display: inline-block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

SassMeister-output.css

.nav {
  background-color: #ededed;
}
.nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav li {
  display: inline-block;
}
.nav a {
  display: inline-block;
  padding: 6px 12px;
  text-decoration: none;
}

SassMeister-rendered.html

<nav class="nav">
  <ul>
    <li>
      <a href="#">Home</a>
      <a href="#">Page 1</a>
      <a href="#">Page 2</a>
    </li>
  </ul>
</nav>