CODEWITHSUNDEEP
cssinternet-explorerstylessass
Tanner Lavoie
Tanner Lavoie

Reputation: 43

Different Set of Variables for IE using SASS

I was wondering if anyone has come up with an idea for how to include a different set of SASS variables in IE than in other browsers.

Essentially, I have a list of variable colors in a SASS sheet that I would like to change depending on whether the user is using IE. My client has noticed that our colors look fine on some monitors but on some monitors (usually IE users) they look washed out. So I would like to specify a slightly darker set of variables for IE users than everyone else.

Essentially I want this:

$black: #111;
$white: #efefef;

To look like this for IE:

$black: #000;
$white: #fff;

I realize this may be a simple question but for the life of me I can't seem to find an answer. Any ideas or help on this would be great.

Upvotes: 0

Views: 1296

Answers (1)

Ben Thefbfairy Bayard
Ben Thefbfairy Bayard

Reputation: 537

I do not know if there is a way to do this built in to SASS. This is because SASS compiles before there is any interaction with the user. However, what I WOULD do, is create an ie.scss file.

The first step would be to put all of your variable definitions in to a _variables.scss file. After that you could make a: _ie_variables.scss file.

Finally, your ie.scss file would be the same as your style.scss file, except that after importing your _variables.scss you would then also import your _ie_variables.scss.

You then would include it like this: 

<!--[if IE]>
    <link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->

Upvotes: 1

Related Questions