Reference to nth-parent with ampersand(int|selector)

[rentalhost]

Lets use the below code as reference:

.Header {
    > .title {
        > .text { 
            color: blue;
        }
    }
}

Lets supposes that the .Header could be a .Header.red that turns the insider .text to red color, respecting the middle selectors (in case, the > .title > .text).

Currently, we should do that:

.Header {
    > .title {
        > .text { 
            color: blue;
        }
    }

    &.red > .title > .text {
        color: red;
    }
}

Then I suggests create a nth-parent selector (based on depth that you have declared). Then I thought about two options:

Select by distance:

.Header {
    > .title {
        > .text { 
            color: blue;

            &(2).red { color: red; }
        }
    }
}

&(0) mean the own selector (same that &). Then, &(1) will mean the parent selector (> .title) and, finally, &(2) will be the parent-parent selector (.Header).

Select by query:

.Header {
    > .title {
        > .text { 
            color: blue;

            &(.Header).red { color: red; }
        }
    }
}

It's more clear, because you can find selector by the query. In this case, &(.title) will returns the > .title selector, but &(> .title) is an error. It is similar to the .closest() from jQuery.

It will always will select the more closest selector from current depth level. If you wants to select a less depth selector that have the same name, then you should defines a placeholder-selector by using %placeholder.

Complex example

.class-a {
    .class-b,
    %parent-b {
        > .class-c {
            .class-b {
                &.class-d {
                    .class-e {
                        // Cursor here.
                    }
                }
            }
        }
    }
}

  (.class-a)   (.class-b)   (> .class-c)   (.class-b)   (&.class-d)   (.class-e)   (cursor)
 ------------ ------------ -------------- ------------ ------------- ------------ ---------- 
     &(6)         &(5)          &(4)          &(3)          &(2)          &(1)    &(0) or &  => by int
 &(.class-a)  &(%class-b)   &(.class-c)   &(.class-b)   &(.class-d)  &(.class-e)     none    => by name

In this case, if on cursor I set:

[...] .class-e {
    &(.class-a).red { color: red; }
}

It will be replaced by:

.class-a.red .class-b > .class-c .class-b&.class-d .class-e {
    &(.class-a).red { color: red; }
}

[chriseppstein]

In SassScript, & is a list of selectors where each selector is a list of compound selectors. This can be manipulated arbitrarily and used to construct new selectors (Note that the use of @at-root is often necessary). We considered specific syntaxes for working with & but found that the number of use cases and the clarity of functions written in SassScript meant that it was ultimately better than creating a micro syntax for selector manipulation.

[chriseppstein]

We provide a number of functions for operating on selectors that you may find useful:

http://sass-lang.com/documentation/Sass/Script/Functions.html#selector_functions

[rentalhost]

@charlesroper Great to know about this functions. Is not possible then think about implements a function that works like I specified? Something like selector_closest(0) and selector_closest('.name').