question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Duplicate classes are removed from selector when extending

See original GitHub issue

Gist Issue Example

SCSS

%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:closed
  • Created 9 years ago
  • Comments:8 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
nex3commented, Apr 6, 2018

I’m moving this issue to the new Ruby Sass repository because it’s specific to Ruby Sass’s implementation.

0reactions
Stav88commented, Apr 1, 2016

Same issue for other override:

%link {
    color: red;
}
a, 
a:link {
    @extend %link
}
.foo, 
.foo.bar {
    @extend %link
}

Actual results:

a, 
.foo {
    color: red
}

Expected results:

a, 
a:link, 
.foo, 
.foo.bar {
    color: red
}
Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found