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

Cato_Johnston_62118 0
Viewed 7296

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
sass
3 Answers

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;
}
user_54469610
Related