Compass Hacks

A collection of mixins for hacking specific browsers.

This file can be imported using: @import "compass/utilities/general/hacks"

View the Source for this module on Github.

Imports

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

  1. Browser Support – Provides configuration options for the Compass Browser Support Matrix.

Configurable Variables help

Value
zoom
Description

The zoom approach generates less CSS but does not validate. Set this to block to use the display-property to hack the element to gain layout.

Mixins

View Source: Sass | SCSS 

=has-layout($using: $default-has-layout-approach)
  @if $legacy-support-for-ie
    @if $using == zoom
      +has-layout-zoom
    @else if $using == block
      +has-layout-block
    @else
      @warn "Unknown has-layout approach: #{$using}"
      +has-layout-zoom

@mixin has-layout($using: $default-has-layout-approach) {
  @if $legacy-support-for-ie {
    @if $using == zoom {
      @include has-layout-zoom; }
    @else if $using == block {
      @include has-layout-block; }
    @else {
      @warn "Unknown has-layout approach: #{$using}";
      @include has-layout-zoom; } } }

This mixin causes an element matching the selector to gain the “hasLayout” property in internet explorer. More information on hasLayout.

View Source: Sass | SCSS 

=has-layout-zoom
  @if $legacy-support-for-ie
    *zoom: 1

@mixin has-layout-zoom {
  @if $legacy-support-for-ie {
    *zoom: 1; } }
View Source: Sass | SCSS 

=has-layout-block
  @if $legacy-support-for-ie
    // This makes ie6 get layout
    display: inline-block
    // and this puts it back to block
    &
      display: block

@mixin has-layout-block {
  @if $legacy-support-for-ie {
    // This makes ie6 get layout
    display: inline-block;
    // and this puts it back to block
    & {
      display: block; } } }
View Source: Sass | SCSS 

=bang-hack($property, $value, $ie6-value)
  @if $legacy-support-for-ie6
    #{$property}: #{$value} !important
    #{$property}: #{$ie6-value}

@mixin bang-hack($property, $value, $ie6-value) {
  @if $legacy-support-for-ie6 {
    #{$property}: #{$value} !important;
    #{$property}: #{$ie6-value}; } }

A hack to supply IE6 (and below) with a different property value. Read more.