Generated by SassMeister.com.

SassMeister-input-HTML.html

<ul class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Level 1</a></li>
  <li><a href="#">One Level deeper</a></li>
  <li><a href="#">Deepest Level</a></li>
</ul>

SassMeister-input.scss

// ----
// libsass (v3.3.6)
// ----

@mixin hornav {
 	list-style-type: none;
	&, li {
		margin-left: 0;
		padding-left: 0;
	}
	li {
	  display: inline-block;
	}
}

@mixin before-after($border-width: 10px) {
	content: ""; 
	display: block; 
	width: 0; 
	height: 0; 
	border: $border-width solid transparent; 
	position: absolute;  	
}

.breadcrumb {
  @include hornav;
}
.breadcrumb a {
  padding-left: 15px;
  position: relative;
  margin-left: 10px;
}
.breadcrumb a:before {
  @include before-after(5px);
  border-left-color: #000;
  left: 0;
  top: 5px;
}
.breadcrumb {
  
  li {
    
    &:first-child {
      
      a {
        margin-left: 0;
        &:before {
          display: none;
        }
      }
    }
  }
}

SassMeister-output.css

.breadcrumb {
  list-style-type: none;
}

.breadcrumb, .breadcrumb li {
  margin-left: 0;
  padding-left: 0;
}

.breadcrumb li {
  display: inline-block;
}

.breadcrumb a {
  padding-left: 15px;
  position: relative;
  margin-left: 10px;
}

.breadcrumb a:before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border: 5px solid transparent;
  position: absolute;
  border-left-color: #000;
  left: 0;
  top: 5px;
}

.breadcrumb li:first-child a {
  margin-left: 0;
}

.breadcrumb li:first-child a:before {
  display: none;
}

SassMeister-rendered.html

<ul class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Level 1</a></li>
  <li><a href="#">One Level deeper</a></li>
  <li><a href="#">Deepest Level</a></li>
</ul>