In Sass, How do you reference the parent selector and exclude any grandparent?

Question

I have the following sass code:

.class{
    label{
        color:#fff;
        .disabled &{color:#333; }
    }
}

which outputs

.disabled .class label

Is there a way to output the parent selector without any grandparent selectors being included? Like so:

.disabled label

Answer 1

There's no way I know of in SASS to pick and choose from ancestor selectors when using a parent reference. With your code, though, a little reorganization can get you the same result:

label {
    .class & {
        color: #fff;
    }

    .disabled & {
        color:#333;
    }
}

Compiles to:

.class label {
  color: #fff; }
.disabled label {
  color: #333; }

Answer 2

Even though hopper is not enterly wrong, you can actually select grand-parent with variables.

You can achieve what you want with this:

.class{
    label{
        color:#fff;

        $selector: nth(&,1);
        $direct-parent: nth($selector, length($selector));

        @at-root #{$direct-parent} {
          .disabled &{color:#333; }
        };
    }
}

Which will generate this css:

.class label {
  color: #fff;
}
.disabled label {
  color: #333;
}