sass - Is it possible to reference a further parent than just the one above?

Question

I have the following sample code:

.level1 {
   // css

  .level2 {
  // css

     . level3 {
     // css
     color: red;
  }
}

And then

.level1.blue .level .level3 {
  color: blue
}

I would like to put the second rule somehow on the first bit of code, so that I don't repeat the structure again and I have both color possibilities above, is this possible in anyway?

Answer 1

I wasn't planning on answering my own question, but it seems that I found out exactly what I was looking for only it has recently being added to sass and will be available on sass 3.4. I believe there's a prerelease to tried but I havent tried it yet.

Basically what I was looking has been answered to me on github:

https://github.com/sass/sass/issues/286#issuecomment-49112243

So on 3.4 you can do:

.level1 {
  .level2 {
    .level3 {
       @at-root #{selector-append(".blue", &)} {
        color: blue;
      }
      color: red;
    }
  }
}

which is exactly what I was looking for.

There's a bunch of addition related to the parent selector (&), you can learn more from it at https://github.com/sass/sass/issues/1117

Bear in mind though, that at the time of writing this answer, all of this is rather new.

Also see: https://github.com/sass/sass/blob/master/doc-src/SASS_CHANGELOG.md And: http://www.phase2technology.com/blog/everything-you-need-to-know-about-sass-3-4/