CODEWITHSUNDEEP
sass
Nick Div
Nick Div

Reputation: 5628

How to have Conditional SASS for Internet Explorer

I was wondering if there is way to have conditional statements in SASS for Internet explorer

FOr e.g. lets say this is what I am looking for:

.container {
background-color: black
}

if ie10 {
.container {
background-color: yellow;
}
}

I found a few hacks that work fine like for e.g. 

@media screen\0 {
.container {
background-color: yellow;
}
}

This one works fine but it is a HACK!! And I want to avoid it because who knows when IE fixes this issue and then I would have to re-write my whole code.

Here is one more hack that works 

.container {
background-color: black;
background-color: yellow\0/
}

So in this case the second statement is read by IE but not by chrome and Mozilla or Safari so this also does the trick but again, this is also a HACK!!

I dont want to use any kind of hacks in to my project because they dont have a certain life-time.

So is there anyone who has figured out a way to apply IE conditional SASS without using hacks but using something official.

I would really appreciate the help.

Upvotes: 1

Views: 2556

Answers (1)

Vangel Tzo
Vangel Tzo

Reputation: 9313

You could just import an ie partial (ie10.scss)

base SCSS

.ie10 {
  @import "ie10";
}

HTML

<!--[if IE 10]> <html class="ie10"> <![endif]-->

Upvotes: 2

Related Questions