欢迎加入QQ讨论群258996829
苹果6袋
麦子学院
polymer如何实现样式的共享和隔离
发布时间：2017-07-07 22:01 回复:0 查看:2299 最后回复：2017-07-07 22:01
本文和大家分享的主要是使用polymer
实现样式的共享和隔离相关内容，一起来看看吧，希望对大家
学习polymer有所帮助。
polymer-starter-kit
是一个初始化的例子，这个例子设计的很巧妙，在
app/styles/app-theme.html
里面定义了各种css
变量，可以方便的更改主题的配色，变量用
--
定义，属性用
var()
调用，选择器用
@apply()
调用，相当于sass
的
@mixin
。
:root {
--dark-primary-
color: #303F9F;
--default-primary-
color: #3F51B5;
--light-primary-
color: #C5CAE9;
--text-primary-
color: #ffffff; /*text/icons*/
--accent-
color: #FF4081;
--primary-
background-color: #c5cae9;
--primary-text-
color: #212121;
--secondary-text-
color: #727272;
--disabled-text-
color: #bdbdbd;
--divider-
color: #B6B6B6;
}
paper-menu
a {
@apply(--layout-horizontal);
@apply(--layout-center);
text-decoration: none;
color: var(--menu-link-color);
font-family: 'Roboto', 'Noto', sans-serif;
-webkit-
font-smoothing: antialiased;
text-rendering: optimizeLegibility;
font-size: 14px;
font-weight: 400;
line-height: 24px;
min-height: 48px;
padding: 0 16px;
}
shared-styles.html
里面是共享的样式
.page-title {
@apply(--paper-font-display2);
}
paper-menu
a > *, paper-menu paper-item > *, paper-menu paper-
icon-item > * {
pointer-events: none;
}
@
media (max-width: 600px) {
.page-title {
font-size: 24px!important;
}
}
在
my-greeting.html
文件里是这么调用的
<
style include="shared-styles">style>
<
style>
:host {
display: block;
color: red;
}
input{
color: red;
}
style>
然后在浏览器生成了下面的样式，自动加了命名空间，很赞。
paper-menu.my-greeting
a.my-greeting > *.my-greeting,
paper-menu.my-greeting
paper-item.my-greeting > *.my-greeting,
paper-menu.my-greeting
paper-icon-item.my-greeting > *.my-greeting {
pointer-events: none;
}
@
media (max-width: 600px) {.page-title.my-greeting {
font-size: 24px!important;
}
}
my-greeting {
display: block;
color: red;
}
input.my-greeting {
color: red;
}
在
index.html
里面也有调用
<
style is="custom-style" include="shared-styles">style>
然后生成的是不同的命名空间，所以页面级调用和模块级调用是不同的，相互不会影响。
.page-title:not([style-scope]):not(.style-scope) {
font-family:'Roboto', 'Noto', sans-serif;
-webkit-font-smoothing:antialiased;
font-size:45px;
font-weight:400;
letter-spacing:-.018em;
line-height:48px
}
paper-menu
a > *:not([style-scope]):not(.style-scope),
paper-menu
paper-item > *:not([style-scope]):not(.style-scope),
paper-menu
paper-icon-item > *:not([style-scope]):not(.style-scope) {
pointer-events: none;
}
@
media (max-width: 600px) {.page-title:not([style-scope]):not(.style-scope) {
font-size: 24px!important;
}
}
来源：zhouwenbin