Skip to content

Instantly share code, notes, and snippets.

@agibralter
Created December 7, 2010 16:18
Show Gist options
  • Save agibralter/731980 to your computer and use it in GitHub Desktop.
Save agibralter/731980 to your computer and use it in GitHub Desktop.
<link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" />
<!--[if lt IE 9]>
<link href="/stylesheets/pie.css" media="screen, projection" rel="stylesheet" type="text/css" />
<![endif]-->
// I want pie.css to only include IE-related styling:
.pie-element, #my-sweet-div-with-rounded-corners {
behavior: url(/pie.htc);
}
// I don't want this in my pie.css:
#my-sweet-div-with-rounded-corners {
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
-o-border-radius: 20px;
-ms-border-radius: 20px;
-khtml-border-radius: 20px;
border-radius: 20px;
}
// I would be awesome if there were some sort of silent import:
@import-silent "screen";
.pie-element {
@include pie-element(relative);
}
#my-sweet-div-with-rounded-corners {
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
-o-border-radius: 20px;
-ms-border-radius: 20px;
-khtml-border-radius: 20px;
border-radius: 20px;
}
#my-sweet-div-with-rounded-corners {
@include border-radius(20px);
@extend pie-element;
}
@nex3
Copy link

nex3 commented Dec 7, 2010

Rather than trying to make the IE stylesheet apply on top of the base stylesheet, why not have it be a completely separate output stylesheet? Then you could do something like

.pie-element {
  @if $ie {@include pie-element(relative)}
}

One of your top-level stylesheets would set $ie: false and the other would set $ie: true.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment