Generated by SassMeister.com.

Sass-breadcrumb-component.html

<ol class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li>Team</li>
</ol>

Sass-breadcrumb-component.scss

// ----
// Sass (v3.3.0.rc.3)
// Compass (v1.0.0.alpha.18)
// ----

a {
  text-decoration: none;
  color: #0088CC;
  &:hover {
    color: #005580;
  }
}

// Configuration variables
// Style name | Attr name
$breadcrumb-style: (
  background: #EEE,
  padding: .8em,
  radius: .15em,
  divider: "\00BB" "\00A0"
);

// Function to find the value in $breadcrumb-style map
@function breadcrumb-val($name) {
  $breadcrumb-attr: map-get($breadcrumb-style, $name);
  @if map-has-key($breadcrumb-style, $name) {
    @return $breadcrumb-attr;
  }
  @return '#{$name} $breadcrumb-style does not exist';
}

// Constructor
.breadcrumb {
  list-style-type: none;
  background: breadcrumb-val(background);
  padding: breadcrumb-val(padding);
  border-radius: breadcrumb-val(radius);
  text-shadow: 0 1px 0 #FFF;
  > li {
    display: inline-block;
    + li:before {
      content:breadcrumb-val(divider);
      color: darken(breadcrumb-val(background), 30%);
      padding: 0 .3em;
    }
  }
}