How do I extend a class/mixin which has dynamically formed selector

by

Extending a dynamically formed selector (loosely using the term) like that is currently not possible in Less. There is an open feature request to support this. Till it is implemented, here are two work-around solutions to it.

Option 1:

Write the contents of .hello and .hello-world selectors into a separate Less file (say test.less), compile it to get the CSS. Create another file for the rules of .foo, import the compiled CSS as a Less file (using the (less) directive) and then extend the .hello-world as you had originally intended to.

test.less:

.hello {
  &-world {
    color: red;
  }
}

extended-rule.less:

@import (less) "test.css";
.foo {
  &:extend(.hello-world);
  font-size: 20px;
}

Compiled CSS:

.hello-world,
.foo {
  color: red;
}
.foo {
  font-size: 20px;
}

This method would work because by the time the test.css file is imported, the selector is already formed and is no longer dynamic. The drawback is that it needs one extra file and creates dependency.

Option 2:

Write a dummy selector with rules for all properties that need to be applied to both .hello-world and .foo and extend it like:

.dummy{
    color: red;
}
.hello {
  &-world:extend(.dummy) {};
}

.foo:extend(.dummy){
  font-size: 20px;
}

This creates one extra selector (dummy) but is not a big difference.

Note: Adding my comment as an answer so as to not leave the question unanswered and also because the work-around specified in the thread linked in comments doesn’t work for me as-is.

More Related Contents:

  1. Less CSS: Mixins with Variable Number of Arguments
  2. Why I can see Less instead of CSS in a browser [closed]
  3. How to prevent Less from trying to compile CSS calc() properties?
  4. Disable LESS-CSS Overwriting calc() [duplicate]
  5. Is there a SASS.js? Something like LESS.js?
  6. Using variables in property names in LESS (dynamic properties / property name interpolation)
  7. How to thematize in lesscss
  8. less.js not working in chrome
  9. Double border with different color [duplicate]
  10. import .css file into .less file
  11. What does an “&” before a pseudo element in CSS mean?
  12. Defining Variable Variables using LESS CSS
  13. Twitter’s Bootstrap 3 grid, changing breakpoint and removing padding
  14. Build list of selectors with LESS
  15. Less lists as a mixin argument(s)
  16. LESS CSS: abusing the & Operator when nesting?
  17. How to add different CSS style to every nth element, depending on n using LESS
  18. LESS: Unrecognized input error when using Bootstrap
  19. LESS mixin a variable class name
  20. Concatenate strings in Less
  21. LESS CSS nesting classes
  22. Does LESS have an “extend” feature?
  23. Media Query grouping instead of multiple scattered media queries that match
  24. Less and Bootstrap: how to use a span3 (or spanX [any number]) class as a mixin?
  25. CSS Disabled scrolling
  26. Multiple properties are getting treated as separate arguments in mixins
  27. Why don’t CSS filters work on SVG elements in Chrome?
  28. How can I use a data attribute to set a background-image in CSS?
  29. print page count with total number of pages using css
  30. how to watch changes in whole directory/folder containing many sass files

Leave a Comment