$experimental-support-for-pie: true !default; // It is recommended that you use Sass's @extend directive to apply the behavior // to your PIE elements. To assist you, Compass provides this variable. // When set, it will cause the `@include pie` mixin to extend this class. // The class name you provide should **not** include the `.`. $pie-base-class: false !default; // The default approach to using PIE. // Can be one of: // // * relative (default) // * z-index // * none $pie-default-approach: relative !default; // The location of your PIE behavior file // This should be root-relative to your web server // relative assets don't work. It is recommended that // you set this yourself. $pie-behavior: stylesheet-url("PIE.htc") !default; // When using the z-index approach, the // first ancestor of the PIE element at // or before the container's opaque background // should have a z-index set as well to ensure // propert z-index stacking. // // The `$position` argument must be some non-static // value (absolute, relative, etc.) @mixin pie-container($z-index: 0, $position: relative) { z-index: $z-index; position: $position; } // PIE elements must have this behavior attached to them. // IE is broken -- it doesn't think of behavior urls as // relative to the stylesheet. It considers them relative // to the webpage. As a result, you cannot reliably use // compass's relative_assets with PIE. // // * `$approach` - one of: relative, z-index, or none // * `$z-index` - when using the z-index approach, this // is the z-index that is applied. @mixin pie-element( $approach: $pie-default-approach, $z-index: 0 ) { behavior: $pie-behavior; @if $approach == relative { position: relative; } @else if $approach == z-index { z-index: $z-index; } } // a smart mixin that knows to extend or include pie-element according // to your stylesheet's configuration variables. @mixin pie($base-class: $pie-base-class) { @if $base-class { @extend .#{$base-class}; } @else { @include pie-element; } } // Watch `$n` levels of ancestors for changes to their class attribute // So that cascading styles will work correctly on the PIE element. @mixin pie-watch-ancestors($n) { -pie-watch-ancestors: $n; }