I am looking for a way to refer to a certain subclass of the parent of the block i am currently writing declarations in.
Let me illustrate.
Instead of:
.label {
@extend .not-selectable;
display: inline-block;
line-height: 22px;
}
And then:
&.active .label {
background-color: #eee;
}
I'd like to write something like:
.label {
@extend .not-selectable;
display: inline-block;
line-height: 22px;
<< &.active {
background-color: #eee;
}
}
With the resulting, compiled CSS being exactly the same in both cases.
Is there any such syntax or hack or trick in SASS to achieve this?