Skip to content

Extending concatenated selectors #2857

@zerkms

Description

@zerkms

Assuming that I have a LESS like this

.layout {
  &__sidebar {
    color: red;
  }
}

.layout__sidebar {
  background-color: yellow;
}

.foo {
  &:extend(.layout__sidebar);
}

I expect it to be compiled into

.layout__sidebar,
.foo {
  color: red;
}
.layout__sidebar,
.foo {
  background-color: yellow;
}

but it compiles to

.layout__sidebar {
  color: red;
}
.layout__sidebar,
.foo {
  background-color: yellow;
}

What my expectations are based on:

  1. on the documentation about :extend
  2. on the fact that something very similar works fine
.layout {
  &.sidebar {
    color: red;
  }
}

.layout.sidebar {
  background-color: yellow;
}

.foo {
  &:extend(.layout.sidebar);
}

Codepen demos:

  1. with classname string concatenation http://codepen.io/zerkms/pen/vGJvBV
  2. with just combination of class names http://codepen.io/zerkms/pen/oxeJYP

Would you consider this a bug? If not, it must be explicitly noted in the documentation that the selector strings concatenation does not work with :extend

Thanks.

PS: I also asked a question on stackoverflow http://stackoverflow.com/q/36322581/251311

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions