CSS3BreadCrumbs.scss

$white : #FFF;
$grayLight : #CCC;
$baseBorderRadius : 3px;
$baseZIndex : 50;

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
          border-radius: $radius;
}
@mixin box-sizing($boxmodel) {
  -webkit-box-sizing: $boxmodel;
     -moz-box-sizing: $boxmodel;
          box-sizing: $boxmodel;
}

.crumb {
	display:inline-block;
	position:relative;
	height:30px;
	margin-bottom:20px;
	margin-left: -6px;
	padding:4px 8px 4px 25px;
	background-color:$white;
	float:left;
	border: 1px solid $grayLight;
	border-right:none;
	@include border-radius($baseBorderRadius 6px 6px $baseBorderRadius);
	@include box-sizing(border-box);
	&:before{
		content:"";
		position:absolute;
		border-style:solid;
	    /* reduce the damage in FF3.0 */
	    display:block; 
	    width:0;
		top:0;
		right:-15px;
		border-width:14px 0 14px 18px;
		/* Must apply border-color */
		border-color:transparent darken($grayLight, 5%);
	}
	&:after{
		content:"";
		position:absolute;
		border-style:solid;
	    /* reduce the damage in FF3.0 */
	    display:block; 
	    width:0;
		top:1px;
		right:-14px;
		border-width:13px 0 13px 17px;
		/* Must apply border-color */
		border-color:transparent $white;
	}
	&:first-child {
		padding-left:10px;
		z-index: $baseZIndex;
		margin-left:0;
	}
	&:last-child {
		margin-right:15px; /* Needed to clear the :after content on the last crumb */
	}

	$crumbChildren: 1;
	@while $crumbChildren < 10 { /* Change this number for styling more or less breadcrumbs  */
		&:nth-child(#{$crumbChildren + 1}) {
			z-index: $baseZIndex - $crumbChildren;
		}
	    $crumbChildren: $crumbChildren + 1;
	}
}