pie.sass

// this file demonstrates how to use the CSS PIE extension for
// legacy versions of Internet Explorer. In many cases, PIE will allow
// you to style in CSS things that you'd have to do using image chops otherwise.
//
// Note: Each element that has PIE enabled on it will add about 10ms to your page load.
@import compass/css3/pie
@import compass/css3

// Set this to wherever you end up putting your behavior file.
//
// **Note:** this file must be served as a root-relative resource or
// else IE will interpret it as relative to the current webpage
// instead of the stylesheet.
//
// **Also Note:** this file must be delivered with a mime-type of:
//
//    text/x-component
$pie-behavior: url("/css/PIE.htc")

// It is suggested that you use Sass's @extend directive to apply the PIE
// behavior to your elements. Setting this variable will tell the `pie` mixin
// to extend it. Or you can just extend the base class yourself.
$pie-base-class: pie-element

// There are two approaches to creating PIE elements
// The default approach is to make the element position: relative.
.pie-element
  // relative is the default, so passing relative
  // is redundant, but we do it here for clarity.
  +pie-element(relative)

.bordered
  +pie
  // Because $pie-base-class is set, this results in an extend of .pie-element.
  +border-radius(5px)

.gradient
  +pie
  // Because $pie-base-class is set, this results in an extend of .pie-element.
  +background(linear-gradient(red, blue))

// But sometimes this messes up your positioning
// So you can also use z-indexing. In this case
// an ancestor element before or having the first
// opaque background should be marked as a pie-container
// which gives it a z-index of 0 (actually any z-index
// can be provided to the pie-container mixin).
// And then the pie element itself should be given
// a z-index of -1.
.pie-container
  +pie-container

.z-pie-element
  // this will get a z-index of 0, you can pass a z-index value if you want
  +pie-element(z-index)

// This is just a simple example of how to use the z-index approach.
.widget
  @extend .pie-container
  h3
    +pie(z-pie-element)
    // This will extend .z-pie-element instead of .pie-element

// Lastly, you can just include the pie-element mixin directly if you need to do a one-off:
.has-gradient
  +pie-element(relative)
  +background(linear-gradient(red, blue))