Compass Opacity

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

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

View the Source for this module on Github.

Examples

Opacity
css3 mixin for opacity

Imports

The following sass files are automatically imported when you import this file:

  1. CSS3 Utilities

Mixins

View Source: Sass | SCSS 

=opacity($opacity)
  opacity: $opacity
  @if $experimental-support-for-microsoft
    $value: unquote("progid:DXImageTransform.Microsoft.Alpha(Opacity=#{round($opacity * 100)})")
    +experimental(filter, $value, not -moz, not -webkit, not -o, -ms, not -khtml, official)

@mixin opacity($opacity) {
  opacity: $opacity;
  @if $experimental-support-for-microsoft {
    $value: unquote("progid:DXImageTransform.Microsoft.Alpha(Opacity=#{round($opacity * 100)})");
    @include experimental(filter, $value, not -moz, not -webkit, not -o, -ms, not -khtml, official); } }

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: Sass | SCSS 

=transparent
  +opacity(0)

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

Make an element completely transparent.

View Source: Sass | SCSS 

=opaque
  +opacity(1)

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

Make an element completely opaque.