Decorator inheritance / replacing only changed keys

[Paril]

When trying to use media queries to change decorators, it seems like a @decorator rule completely replaces the other instead of just changing the key that are different;

@decorator arrow_left : image
{
    image-src: /gfx/cursor.png;
    image-fit: contain;
}

@media (theme: bg-contain)
{
	@decorator arrow_left : image {
	    image-src: /gfx/cursor-select.png;
	}
}

If the theme is set, image-fit ends up getting reset. Right now, our menus need several combinations of things (we have three sizing modes and 5 different BG images depending on language), so we need 5 x 3 different lines just to represent all of the different combinations, but being able to do the above would reduce it to 5 + 3.

[mikke89]

We do actually have a bit of a hidden feature when it comes to decorators, they actually support inheritance. So you should be able to do this:

@decorator arrow_left_base : image
{
    image-src: /gfx/cursor.png;
    image-fit: contain;
}

@media (theme: bg-contain)
{
	@decorator arrow_left : arrow_left_base {
	    image-src: /gfx/cursor-select.png;
	}
}

[Paril]

Interesting - but how would that work if I had two things to modify? I have three themes that change the fit, and then five themes that change the BG image. I guess in theory one of the themes would always be set so there'd always be a base to inherit from, but somehow I don't think that'll end up working...

[mikke89]

Hm, right, I guess you would need something more like multiple inheritance in that situation. I think for now you'll just have to use media queries for the different combinations. At least you'll have the option to use this inheritance for common properties between them.

With that said, I do think the idea of inheriting individual properties in a CSS-way when using the same @decorator name could be interesting.

[Paril]

Yeah I think that would make the most sense.