在嵌套mixin

Question

Polymer支持CSS mixins，可以像这样设置：

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

并像这样应用：

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

有没有办法在mixin中设置mixin的值？我试过这个，但它不起作用：

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

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

为什么这会有用的一个真实案例：假设您有一个使用基于paper-listbox和paper-item的多个自定义组件的应用。您希望使用不同的间距和字体设置自定义组件中的所有列表的样式。您可以在全局范围内设置--paper-listbox和--paper-item mixins。但这会影响依赖于默认值的两个元素的每次出现。而是在自定义组件中，您只需@apply --custom-list;并将该mixin设置为全局: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*/};
}