Swift51.com
麦子学院 头像
麦子学院  2017-07-07 22:01

polymer如何实现样式的共享和隔离

回复:0  查看:2429  
本文和大家分享的主要是使用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