Cacher is the code snippet organizer for pro developers

<span class="inset-one">Hello</span>
<span class="inset-two">World</span>

body {
  background-color: #999;
  padding: 2em;
}

.inset-one, .inset-two {
  font-weight: bold;
  text-transform: uppercase;
}

.inset-one {
  text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.3);
  color: #fff;
}

.inset-two {
  text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.3);
  color: #000;
}

// ----
// libsass (v3.2.5)
// ----

@mixin text-inset($colour, $opacity:0.7){
  @if lightness($colour) < 50%{
    text-shadow:1px 1px 1px rgba(#fff, $opacity);
  } @else{
    text-shadow:-1px -1px 1px rgba(#000, $opacity);
  }
  
  color:$colour;
}

body{
  background-color: #999;
  padding: 2em;
}

%inset{
  font-weight: bold;
  text-transform: uppercase;
}
.inset-one{
  @extend %inset;
  @include text-inset(#fff, 0.3);
}
.inset-two{
  @extend %inset;
  @include text-inset(#000, 0.3)
  
  
  
  
  
  
  
  
}

<span class="inset-one">Hello</span>
<span class="inset-two">World</span>