<div class='opacity-example' id='opacity-10'></div>
<div class='opacity-example' id='opacity-20'></div>
<div class='opacity-example' id='opacity-50'></div>
<div class='opacity-example' id='opaque'></div>
<div class='opacity-example' id='transparent'></div>

#opacity-10.opacity-example
#opacity-20.opacity-example
#opacity-50.opacity-example
#opaque.opacity-example
#transparent.opacity-example

@import "https://compass-style.org/files/docs/examples/compass/css3/compass/css3";
.opacity-example {
  background: red;
  width: 40px;
  height: 40px;
  float: left; }
#opacity-10 {
  @include opacity(0.1); }
#opacity-20 {
  @include opacity(0.2); }
#opacity-50 {
  @include opacity(0.5); }
#opaque {
  @include opaque; }
#transparent {
  @include transparent; }

@import https://compass-style.org/files/docs/examples/compass/css3/compass/css3
.opacity-example
  background: red
  width: 40px
  height: 40px
  float: left
#opacity-10
  +opacity(0.1)
#opacity-20
  +opacity(0.2)
#opacity-50
  +opacity(0.5)
#opaque
  +opaque
#transparent
  +transparent

@charset "UTF-8";
.opacity-example {
  background: red;
  width: 40px;
  height: 40px;
  float: left;
}
#opacity-10 {
  opacity: 0.1;
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=10);
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=10);
}
#opacity-20 {
  opacity: 0.2;
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=20);
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=20);
}
#opacity-50 {
  opacity: 0.5;
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
}
#opaque {
  opacity: 1;
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
}
#transparent {
  opacity: 0;
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
}