Skip to content

Instantly share code, notes, and snippets.

@electricg
Created December 20, 2012 12:10
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save electricg/4344955 to your computer and use it in GitHub Desktop.
Save electricg/4344955 to your computer and use it in GitHub Desktop.
How to include CSS3PIE script in SASS in a clean way

Due to:

IE interprets the URL for the behavior property relative to the source HTML document, rather than relative to the CSS file like every other CSS property

(more info), the url is kept in a variable, to be easily changed according to the project:

$pie-path: "/myproject/PIE.htc";

No prefix needed unless 2.1 Android and below and 3.2 iOS and below or CSS3PIE for IE8 and below so this mixin is not really needed anymore – more info

@mixin border-radius ($val) {
  @each $prefix in '' {
		#{$prefix}border-radius: $val;
	}
	@extend %pie !optional;
}

No prefix needed unless 3 Android and below and 4.3 iOS and below or CSS3PIE for IE8 and below – more info

@mixin box-shadow ($val...) {
	@each $prefix in -webkit-, '' {
		#{$prefix}box-shadow: $val;
	}
	@extend %pie !optional;
}

A note about "!optional": this flag is to avoid SASS to throw an error if that @extend doesn't work (e.g.: the placeholder is in the .scss file for IE and not in the general one, but the mixin is called by both) – more info

Placeholder selector: at the beginning of the file to allow following rules to override any position/fix property.
A note about "position:relative": it's declared here to fix the z-index issues (disappearing backgrounds/borders/shadows) – more info.
Depending on the css and project, this rule can break the layout

%pie {
	behavior: url($pie-path);
	position: relative;
}

Usage

.item1 {
	@include border-radius(10px);
}
.item2 {
	@include border-radius(5px);
	@include box-shadow(10px 10px 10px rgba(#000, .3));
}
.item3 {
	@include box-shadow(10px 10px 10px rgba(#F90, .8));
}

Output

.item1,
.item2,
.item3 {
	behavior: url("/myproject/PIE.htc");
	position: relative;
}
 
.item1 {
	border-radius: 10px;
}
.item2 {
	border-radius: 5px;
	-webkit-box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.3);
	        box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.3);
}
.item3 {
	-webkit-box-shadow: 10px 10px 10px rgba(255, 153, 0, 0.8);
	        box-shadow: 10px 10px 10px rgba(255, 153, 0, 0.8);
}

The behaviour rule is not repeated and the css is more clean, with the properties declared only once, thereby facilitating the separation of styles between IE and non-IE.

$pie-path: "/myproject/PIE.htc";
@mixin border-radius ($val) {
@each $prefix in '' {
#{$prefix}border-radius: $val;
}
@extend %pie !optional;
}
@mixin box-shadow ($val...) {
@each $prefix in -webkit-, '' {
#{$prefix}box-shadow: $val;
}
@extend %pie !optional;
}
%pie {
behavior: url($pie-path);
position: relative;
}
// Example
.item1 {
@include border-radius(10px);
}
.item2 {
@include border-radius(5px);
@include box-shadow(10px 10px 10px 0px rgba(#000, .3));
}
.item3 {
@include box-shadow(10px 10px 10px 0px rgba(#F90, .8));
}
.item1,
.item2,
.item3 {
behavior: url("/myproject/PIE.htc");
position: relative;
}
.item1 {
border-radius: 10px;
}
.item2 {
border-radius: 5px;
-webkit-box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.3);
box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.3);
}
.item3 {
-webkit-box-shadow: 10px 10px 10px rgba(255, 153, 0, 0.8);
box-shadow: 10px 10px 10px rgba(255, 153, 0, 0.8);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment