设置在嵌套混入

Question

聚合物支持CSS混入，可以设置这样的聚合物CSS混入：

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 mixin。但是这会影响依赖于违约的两个要素的每一次出现。相反，在您的自定义组件中，您只需@apply --custom-list;并将该mixin设置为全局:root {--custom-list: {/*set list style, set item style*/}; }。

Answer 1

解决办法：不要嵌套混入的，重构为选择器：

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

在上面的使用情况下，代替与--custom-list嵌套：

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