Source on Github

Compass Opacity

Provides cross-browser CSS opacity. See CSS3 spec: transparency.

This file can be imported using: @import "compass/css3/opacity"

Examples

Opacity
css3 mixin for opacity

Imports

  1. Shared Utilities

Mixins

view source 

=opacity($opacity)
  @if $legacy-support-for-ie6 or $legacy-support-for-ie7 or $legacy-support-for-ie8
    filter: unquote("progid:DXImageTransform.Microsoft.Alpha(Opacity=#{round($opacity * 100)})")
  opacity: $opacity

@mixin opacity($opacity) {
  @if $legacy-support-for-ie6 or $legacy-support-for-ie7 or $legacy-support-for-ie8 {
    filter: unquote("progid:DXImageTransform.Microsoft.Alpha(Opacity=#{round($opacity * 100)})");
  }
  opacity: $opacity;
}

Provides cross-browser CSS opacity. Takes a number between 0 and 1 as the argument, e.g. 0.5 for 50% opacity.

@param $opacity
    A number between 0 and 1, where 0 is transparent and 1 is opaque.
view source 

=transparent
  +opacity(0)

@mixin transparent {
  @include opacity(0);
}

Make an element completely transparent.

view source 

=opaque
  +opacity(1)

@mixin opaque {
  @include opacity(1);
}

Make an element completely opaque.