Sass Control Directives - if statement

sass-if-statement

//MIXIN

@mixin text-inset($colour, $opacity: 0.5) {

  @if lightness($colour) < 50% {
    //DARK TEXT - LIGHT SHADOW
    text-shadow: 1px 1px 1px rgba(#fff, $opacity);
  } @else {
    //LIGHT TEXT - DARK SHADOW
    text-shadow: -1px -1px 1px rgba(#000, $opacity);
  }

  // set the text colour
  color: $colour;
}

//CSS

%example {
  font-weight: bold;
  text-transform: uppercase;
}

.example {
  @extend %example;
  @include text-inset(#fff, 0.3);
}

//MARKUP

<span class="example">Hello</span>