scss-lint
scss-lint copied to clipboard
Feature request: Disallow parent selectors
I'd like to see a rule to disallow some parent selectors, like this:
Bad:
.Base {
background-color: red;
&__element {
background-color: blue;
}
}
Good:
.Base {
background-color: red;
}
.Base__element {
background-color: blue;
}
Also good, we still want to use & in other cases:
.Base {
background-color: red;
&:after {
background-color: blue;
}
}
Is this somehow already possible? Does it make sense as a rule? Is it reasonable?
Edited March 16
This seems to conflict with the ::after pseudo element, which can still be written with one colon. I'd expect your second sample to compile to:
.Base {
background-color: red;
}
.Base:after {
background-color: blue;
}
Regardless, I don't think disallowing parent selectors is possible right now. Since there isn't an alternative to &__element, I don't think I could see using this in production.
@abea The alternative would be using the syntax from my third example.
The reason for this is that I find the &__element syntax can get really messy for bigger modules, and explicitly defining class names makes sure you can always search for a class name to see it's rules.
Ah, I misunderstood the examples. I can definitely see that.
@abea Sorry that I was unclear!
Yeah, that's a good idea. I liked this syntax at first, but it absolutely ruins search possibilities.
@eldh although, I think your second example is completely irrelevant and confusing here :)
Yeah, I just wanted to clarify that the rule shouldn't apply to all uses of &, but I see how it can be confusing.
I edited the description now to hopefully make it more clear .
I had the same need, so I hacked one together at https://github.com/shukriadams/selectorConcatenation/blob/master/lib/SelectorConcatenation.rb. It was done in a hurry but it seems to work. Basically, any selector that starts with & followed by letters, numbers dashes or underscores gets flagged. Too simplistic?
And totally agree, this is one Sass feature that has created huge headaches for us when it comes to code maintenance.