Question

Is there a way to nest backwards in scss?
In css when I want to override style becourse of IE or other browser specific styles I like the selector to be right after the style it selector it overrides. Like this

css

.class-a .class-b{ color: pink }
.ie6 .class-a .class-b{ color: blue}

Is that possible in scss? Because right now I write it like this (and I dont like it)

scss

.class-a{
  .class-b { color: pink }
  .othercss { bla bla bla: sdfsd }
  .fsdfsd { dfsdfs: sdfsd }
  }
}

body.ie7 .class-a .class-b{ color:blue }

Answer 1

You’re looking for the & parent selector.

.class-a{
  .class-b { 
    color: pink;
    .ie7 & {
      color: blue;
    }
  }
  .othercss { bla bla bla: sdfsd }
  .fsdfsd { dfsdfs: sdfsd }
}

http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#referencing_parent_selectors_