Is it possible to reference a further parent than

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/

Answer 2

A simple example:

 .child{
    background-color:red;
    .parent:hover &{
      background-color:blue;
    }
  }

goes into

.child {
  background-color: red;
}
.parent:hover .child {
  background-color: blue;
}

http://sassmeister.com/gist/e994e056d3cc3b342e2c

Answer 3

This:

@mixin level3color($color) {
  .level2 {
    .level3 {
      color: $color;
    }
  }
}

.level1 {
  @include level3color(#FF0000);

  &.blue {
    @include level3color(#0000FF);
  }
}

produces this:

.level1 .level2 .level3 {
  color: red;
}
.level1.blue .level2 .level3 {
  color: blue;
}

Gotta love mixins!

EDIT:

This is still pretty clean (or at least clean considering what you're trying to do) because you can still have your structure there.

.level1 {
    // css

    .level2 {
        // css

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

    &.blue   { @include level3color(blue); }
    &.yellow { @include level3color(yellow); }
}