Duplicate classes are removed from selector when extending
See original GitHub issueSCSS
%my-placeholder {
color: red;
}
.foo.foo {
@extend %my-placeholder;
background-color: blue;
}
Expected
// @extend's output
.foo.foo {
color: red;
}
// regular property output
.foo.foo {
background-color: blue;
}
Actual
// @extend's output
.foo {
color: red;
}
// regular property output
.foo.foo {
background-color: blue;
}
When using @extend in the context of a selector that uses the same class twice on the same element, the duplicate class is removed in the output of the @extend (.foo.foo becomes .foo). This is not the case for any other styles declared in the same context, for those, the selector is preserved as typed.
A common technique for increasing specificity without over-qualifying is to just duplicate the same class multiple times. This technique cannot be used with extend, because it removes the duplicate classes, thus reducing the specificity that was intentionally added.
Issue Analytics
- State:
- Created 9 years ago
- Comments:8 (3 by maintainers)
Top Results From Across the Web
How to avoid LESS nesting under a duplicate selector?
All of the classes that implement this mixin were using &:extend(.clearfix all) , which resulted in the double, redundant nesting that you were ......
Read more >Android Studio: Resolving Duplicate Classes - gradle
For example, "duplicated classes 'dagger' bla bla" . Delete the file named 'dagger' from the libs folder. (Be careful not to delete it...
Read more >Sass: @extend
When one class selector extends another, it works exactly as though you added the extended class to every element in your HTML that...
Read more >Extending In Sass Without Creating A Mess
The target selector .descendant now fulfills the constraint requirements: It has a class of .foo , and it is an ancestor of .ancestor...
Read more >When I Use (and Don't Use) Sass Extend • James Steinbach
We can solve this concern by limiting @extend to Sass %placeholder selectors, and not actual CSS selectors (classes, tags, IDs, attributes, etc). If...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
I’m moving this issue to the new Ruby Sass repository because it’s specific to Ruby Sass’s implementation.
Same issue for other override:
Actual results:
Expected results: