Extend with strictly defined list of fields

[ThePlenkov]

Hi

In our company we have a third-party system which has less theme and we cannot manipulate DOM ( assigning new classes )

From the other side we have own component library which provides CSS styles.

In most of cases extend helps to redefine standard classes with new custom attributes from the own theme.

But in some cases we cannot inherit all components. Instead we would like to have same class but with redefined background and color but having native padding’s and margins.

Do you have any thoughts how can we achieve that?

Something like

.stdButton { &:extend(.cusButton {color,background}) }

_{Sent with GitHawk}

[matthew-dean]

This is more a question for Stack Overflow. We'd like to keep Github Issues clean with just bug reports.

[ThePlenkov]

Interesting. I though you collect issue requests also here.

[seven-phases-max]

Either way, the extend would be pretty match wrong tool for this (the very idea it's designed with and for will conflict with a "partial" inheritance).

.stdButton {
    color:      .cusButton[color];
    background: .cusButton[background];
}

(using recent features like maps and each I think it's not a problem to write a custom mixin that would do that for an arbitrary set of properties in much more clean way than any potential extend syntax extension would).

[ThePlenkov]

Such a good answer. In this case we can inherit properties even applying functions. Thank you so much!

[ThePlenkov]

@seven-phases-max it work exactly as it's planned. Thank you!

However the mentioned approach doesn't work with pseudoelements.

.stdButton {
    color:      .cusButton:hover[color];
}

This won't compile. Is it a bug? Thanks!

[seven-phases-max]

This won't compile. Is it a bug?

No. Only 'class' and 'id' selectors (i.e. (.foo, #bar, #foo.bar etc) may be used that way.
So if you were going to hack all existing classes that way, I'm afraid this method can't work.

So I'm afraid (yet again), in a wide context we have to fall back to the following question:
"Why instead of using variables/mixins to customize CSS you create for a project (that what's Less was designed for), you're about to create a CSS code based on another CSS code (counting that CSS language itself was never meant to be used that way)"?
For the latter part my personal position is rather radical so unfortunately I won't be able to suggest anything beyond my prev. snippet.