RGBA Mixin Using SASS

index.html

<div class="background">
  <div class="foo">
    <div class="bar">
      Look ma, I'm opaque!
    </div>
  </div>
</div>

RGBA Mixin Using SASS.markdown

RGBA Mixin Using SASS

A Pen by Andrew Houle on CodePen.

License.

style.css

/* Inspired by this pen - http://codepen.io/sturobson/pen/cbusa */

@function solid-lighten($color, $percentage) {
  @return lighten($color, (1-$percentage)*5%);
}
@function solid-darken($color, $percentage) {
  @return darken($color, (1-$percentage)*5%);
}
@mixin rgba($type, $color, $percentage, $shade: ligthen) {
  @if $shade == lighten {
    @if $type == color {
      color: solid-lighten($color, $percentage);
      color: rgba($color, $percentage);
    }
    @if $type == bg {
      background-color: solid-lighten($color, $percentage);
      background-color: rgba($color, $percentage);
    }
  }
  @else {
     @if $type == color {
      color: solid-darken($color, $percentage);
      color: rgba($color, $percentage);
    }
    @if $type == bg {
      background-color: solid-darken($color, $percentage);
      background-color: rgba($color, $percentage);
    }
  }
}
.background {
  background: url(http://unsplash.it/1600?image=407) no-repeat center center;
  background-size: cover;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.foo {
  position: absolute;
  width: 50%;
  height: 100px;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  @include rgba(bg, #fff, .7);
}
.bar {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  text-align: center;
  @include rgba(color, #000, .3);
  font-weight: bold;
  font-family: helvetica, sans-serif;
  font-size: 18px;
  padding: 20px;  
  width: 100%;
  box-sizing: border-box;
}