nav.breadcrumb
  ul
    li
      a(href="#") root
    li
      a(href="#") child
    li
      a(href="#") grandchild
    li
      a(href="#") greatgrandchild
      

$bg: #fff;
$fg: #333;
$sp: #c80;
$time: 0.25s;
// sine-ish easing from http://matthewlein.com/ceaser/
$ease: cubic-bezier(0.445, 0.050, 0.550, 0.950);
$size: 20px;

body {
  background: $bg;
  color: $fg;
  font-family: 'Source Sans Pro', sans-serif;
}

a { color: $sp; }
nav {
  margin: 1em;

  ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }

}

.breadcrumb {
  $bg: #eee;
  font-weight: 600;
  
  li {
    background: #eee;
    display: inline-block;
    margin-right: 10px;
    position: relative;
    
    &:first-child {
      a:before {
        content: none;
      }
    }

    a {
      display: inline-block;
      padding: ($size/2) ($size/3*2);
      line-height: $size;
      text-decoration: none;
      transition: background $time $ease, color $time $ease;

      &:before, &:after {
        content: '';
        position: absolute;
        top: 0; bottom: 0;
        border-style: solid;
        border-color: #eee;
        border-width: $size 0 $size ($size/2);
        transition: border-color $time $ease;
      }
    
      &:before {
        right: 100%;
        border-color: $bg;
        border-left-color: transparent;
      }
      &:after {
        left: 100%;
        border-color: transparent;
        border-left-color: $bg;
      }

      &:hover {
        background: $sp;
        color: #fff;
  
        &:before {
          right: 100%;
          border-color: $sp;
          border-left-color: transparent;
        }
        &:after {
          left: 100%;
          border-color: transparent;
          border-left-color: $sp;
        }
      }
    }
  }      
}