Generated by SassMeister.com.

SassMeister-input-HTML.html

<nav class="main-nav">
  <ul>
    <li><a href="#">Item</a></li>
    <li><a href="#">Item</a>
      
    </li>
    <li><a href="#">Item</a></li>
  </ul>
</nav>

<div class="item item--large">
  
</div>

SassMeister-input.scss

// ----
// Sass (v3.3.14)
// Compass (v1.0.0.rc.1)
// ----

.item {
  background: green;
  &__heading {
    color: green;
    
    &--small {
      font-size: 80%;
    }
    
  } 
  &__cta {
    width: 10px;
  }
  
  &--large {
    width: 200%;
  }
}

SassMeister-output.css

.item {
  background: green;
}
.item__heading {
  color: green;
}
.item__heading--small {
  font-size: 80%;
}
.item__cta {
  width: 10px;
}
.item--large {
  width: 200%;
}

SassMeister-rendered.html

<nav class="main-nav">
  <ul>
    <li><a href="#">Item</a></li>
    <li><a href="#">Item</a>
      
    </li>
    <li><a href="#">Item</a></li>
  </ul>
</nav>

<div class="item item--large">
  
</div>