Skip to content
This repository was archived by the owner on Apr 4, 2019. It is now read-only.
This repository was archived by the owner on Apr 4, 2019. It is now read-only.

Duplicate classes are removed from selector when extending #28

Open
@nex3

Description

@nex3

From sass/sass#1596:

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions