Opacity Functions

The opacity functions can be used in many areas. One of the best examples of is in color management of buttons and the different states that they can have. Here is an example of a button generator that will build a defualt button and also create its disabled state which y default has a 0.4 opacity:

// Button Variables
$blue: #002868 !default;
$lightened-blue: lighten($blue, 15%) !default;
$white: darken(#fff, 4%) !default;
$button-default-bg-color: $blue !default;
$button-default-font-color: $white !default;

%button-props {
  width: auto;
  min-width: 100px;
  height: 30px;
  text-align: center;
  font-size: 1.0em;
  line-height: rs(16px);
  margin: 10px;
  display: inline-block;
  position: relative;
}

@mixin generateButton($bg-color: $button-default-bg-color,
                    $font-color: $button-default-font-color,
                    $disabled-opacity: 0.6) {

     background-color: $bg-color;

      //calculate the lightness of the background color and set the font color
      @if lightness($bg-color) < 80% {
        color: $font-color;
      } @else {
        color: invert($font-color);
      }

    @extend %button-props;

    &:hover {
      background-color: fade-out($bg-color, 0.2);
      cursor: pointer;
    }

    &.button-disabled, &[disabled="disabled"] {
      background-color: fade-out($bg-color, $disabled-opacity);
        cursor: default;
      }
}

button {
    @include generateButton();
}

.action-button {
  @include generateButton(#940404, #EDECC5, 0.6);
}

This example will change the opacity of the background color of the button when the user hovers over the button. It also reduces the opacity on disabled buttons. To see the above working example, go to http://codepen.io/kianoshp/pen/zIeaD.