Is it possible to apply a css mixin to a component, where the mixin contains variables?

[Viktor Kojouharov]

Hi,

In a top-level 'custom-style' element, I've defined something like this:

:root {
    --app-theme: {
        --paper-toolbar-background: var(--paper-blue-grey-500);
    }
}

Later, in a component which contains another component which contains another component that contains a toolbar:

:host {
    @apply(--app-theme);
}

That doesn't do anything, however. The toolbar background remains the default indigo-500. If I do this instead:

:host {
   --paper-toolbar-background: var(--paper-blue-grey-500);
}

the toolbar's color changes accordingly. 

With the mixin, even though the variables defined in it seem to be ignored, the contents of it are known to the component itself, since doing the following returns the textual contents of the mixin:

myComponent.getComputedStyleValue('--app-theme')

So what exactly is the problem here? Also, the docs imply that you can have different mixins with the same name, as long as the selectors are different, but they don't go into details. If I want to switch between different app-theme mixins, how would the top-level style selectors looks like? Would it be something like : ':root { ... }' for the default, then ':root.theme-1 { ... } ' for the first variant, and so on? Or something like ':root { ... }' and '.theme-1 { ... }'?

[Rob Dodson]

Hm, I'm not sure if the current custom properties shim supports defining a value for a custom property inside a mixin and then applying that mixin to the host element with the hope that it will fulfill the value in a child. +Steve may know better.

Or something like ':root { ... }' and '.theme-1 { ... }'?

It would be like this if I understand correctly. It's following regular CSS cascade rules so the custom property in the most specific selectors wins. 

Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups "Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/f5f6ec50-3321-45cc-a63e-0eebc6c8bea8%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.