Sass Nesting Example 2

SassMeister-input-HTML.html

<nav class="nav grid-block">
  <ul class="grid-block grid-content grid-collapse-vertical">
    <li>
      <a href="#">Home</a>
      <a href="#">Page 1</a>
      <a href="#">Page 2</a>
    </li>
  </ul>
  
  <div class="grid-block grid-content grid-collapse-vertical">
    <div class="user-info">
      You are logged in as 
      <a href="#">Aaron</a>
    </div>
  </div>
</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 6px 11px;
    text-decoration: none;
    color: #595959;
    border-right: 1px solid rgba(0,0,0,.15);
  }
}

.user-info {
  text-align: right;
}

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 6px 11px;
  text-decoration: none;
  color: #595959;
  border-right: 1px solid rgba(0, 0, 0, 0.15);
}

.user-info {
  text-align: right;
}

SassMeister-rendered.html

<nav class="nav grid-block">
  <ul class="grid-block grid-content grid-collapse-vertical">
    <li>
      <a href="#">Home</a>
      <a href="#">Page 1</a>
      <a href="#">Page 2</a>
    </li>
  </ul>
  
  <div class="grid-block grid-content grid-collapse-vertical">
    <div class="user-info">
      You are logged in as 
      <a href="#">Aaron</a>
    </div>
  </div>
</nav>