<div class='example'>
  <div>
    This is a block element.
    It has an
    <span>inline span</span>
    and an
    <em>inline em</em>
    and a
    <blockquote>
      Nested blockquote element
    </blockquote>
  </div>
</div>

.example
  %div
    This is a block element.
    It has an
    %span inline span
    and an
    %em inline em
    and a
    %blockquote
      Nested blockquote element

.example {
  #{elements-of-type(block)} {
    border: 1px solid #777777;
    margin: 1em 3em; }
  #{elements-of-type(inline)} {
    color: #cc0000; } }

.example
  #{elements-of-type(block)}
    border: 1px solid #777
    margin: 1em 3em
  #{elements-of-type(inline)}
    color: #c00
  

.example address, .example blockquote, .example center, .example dir, .example div, .example dd, .example dl, .example dt, .example fieldset, .example form, .example frameset, .example h1, .example h2, .example h3, .example h4, .example h5, .example h6, .example hr, .example isindex, .example menu, .example noframes, .example noscript, .example ol, .example p, .example pre, .example ul {
  border: 1px solid #777777;
  margin: 1em 3em;
}
.example a, .example abbr, .example acronym, .example b, .example basefont, .example bdo, .example big, .example br, .example cite, .example code, .example dfn, .example em, .example font, .example i, .example img, .example input, .example kbd, .example label, .example q, .example s, .example samp, .example select, .example small, .example span, .example strike, .example strong, .example sub, .example sup, .example textarea, .example tt, .example u, .example var {
  color: #cc0000;
}