IE Conditional in Sass

Question

Question

I use Paul Irish's IE Conditional Comments trick to target different versions of IE. In sass how do I apply one of these classes when nested in another class.

.container{
    // I need to put a ie8 specific style here which is a .ie8 class applied to the body
}

I'd like to avoid doing this if possible (it's nice to be able to keep the properties together):

.container{}
.ie8{
    .container{}
}

Is this possible?

Answer 1

I believe this is what you're looking for - using SASS's parent selector "&", you can do this:

.container {
    .ie8 & {
        // ie8 specific styles here
    }
}

Answer 2

I am a little unclear as to what you are trying to do specifically. But If you are trying to do what I think you are trying to, then you could use a variable.

For example, lets say you only want to have your font color red in IE. You could do something like this.. Although I don't see how using SASS would be all that beneficial in this use case, unless of course you are trying to do something different.

SASS: You can test this at: http://sassmeister.com/

$ieEightAndNine: "\0/";
.container {
   color:unquote(red + $ieEightAndNine);
   width:100px;
   height:100px;
}

CSS:

.container {
  color: red\0/;
  width: 100px;
  height: 100px;
}

TEST IN CHROME VS IE:

http://jsfiddle.net/3G48v/