0

I'm trying to extend icon pseudoclasses generated by Fontello in less.

Now while this works:

.icon-extended:before:extend(.icon-caret-n:before) {}

This doesn't:

ul.checked li:before:extend(.icon-ok:before) {color: #4fa33b;}

Can't see why?

The li:before in this case will get the content definition from .icon-ok:before, but not the general styles from [class^="icon-"]:before, [class*=" icon-"]:before.

Seems like a bug to me?

Sterling Archer
  • 22,070
  • 18
  • 81
  • 118
Birgit Zimmermann
  • 73
  • 6
  • 1
    I don't think it's a bug, "not implemented" feature at most. `Extend` does not look for any "superset(s)" of the specified selector. For the same reason it won't extend a simple `*` selector (which is a "superset" of the `.icon-ok:before` too). However, taking into account that there's `extend(... all)` option that does implement a sort of "superset matching" (just for different kind of "supersets"), it probably would make sense to at least consider this new extension. I'd recommend you to write a dedicated issue-report/feature-request [here](https://github.com/less/less.js/issues). – seven-phases-max Nov 27 '13 at 13:21

1 Answers1

2

Your first case...

.icon-extended:before:extend(.icon-caret-n:before) {}

...you are extending something that has a class itself named .icon-extended so that class also matches the selectors [class^="icon-"], [class*=" icon-"], thus why it works (it has nothing to do with the :extend in this case).

Your second case...

ul.checked li:before:extend(.icon-ok:before) {color: #4fa33b;}

...you are extending something that does not have the a icon- value noted in its selector ul.checked li, and so would not and should not match either [class^="icon-"], [class*=" icon-"]. Now your extension does not change the class name, but rather just adds the selector to the code block defining .icon-ok:before (and only that code block). The LESS extension is looking purely at the selector string .icon-ok:before and is not "intelligent" in knowing that such a selector would match the other selector strings [class^="icon-"], [class*=" icon-"] (this is essentially what seven-phases-max's comment was about). So you have to do it explicitly, probably best like so:

ul.checked li:before:extend(
  .icon-ok:before,
  [class^="icon-"]:before,
  [class*=" icon-"]:before) {
    color: #4fa33b;
}
ScottS
  • 71,703
  • 13
  • 126
  • 146
  • You example would result in a error (`{}` after `&:extend(...)` is illegal for some reason). One of [those](https://gist.github.com/seven-phases-max/7727889#file-20239175-less) will work. – seven-phases-max Dec 01 '13 at 02:35
  • @seven-phases-max: Thanks. The less2css.org site has been down and that is where I normally test all my code, so I had not had an opportunity to test that. – ScottS Dec 01 '13 at 18:10
  • You can test also with http://winless.org/online-less-compiler (though it provides only recent version of the LESS compiler) – seven-phases-max Dec 01 '13 at 18:15