在嵌套的mixin中设置Polymer CSS mixin

Question

Polymer supports CSS mixins, which can be set like this:

scope1 {
  --mixin1: {
    attr1: val1;
  };
}

and applied like this:

scope2 {
  @apply --mixin1; /* sets attr1 */
}

Is there a way to set the value of a mixin from inside a mixin? I tried this, but it doesn't work:

scope1 {
  --mixin1: {
    attr1: val1;
    --mixin2: {
      attr2: val2;
    };
  };
}

scope2 {
  @apply --mixin1; /* sets attr1 */
  @apply --mixin2; /* is attr2 set? */
}

A real case of why this would be useful: Say you have an app that uses several custom components based on paper-listbox and paper-item . You would like to style all of the lists in your custom components with a different spacing and font. You could set the --paper-listbox and --paper-item mixins in a global scope. But that would affect every occurrence of the two elements relying on defaults. Instead in your custom components, you would simply @apply --custom-list; and set that mixin in a global :root {--custom-list: {/*set list style, set item style*/}; } :root {--custom-list: {/*set list style, set item style*/}; } .

Answer 1

Workaround: Instead of nesting mixins, refactor into selectors:

scope1 {
  --mixin1: {
    attr1: val1;
  };
}
scope1 scope2 {
  --mixin2: {
    attr2: val2;
  };
}

In the use case above, instead of --custom-list with nesting:

:root custom-list {
  --paper-input-container: {/*set list style*/};
  --paper-item: {/*set item style*/};
}