聚合物2適用MIXIN

我想更好地瞭解在聚合物2使用混入的：這裏是我的示例：聚合物2適用MIXIN

<dom-module id="x-test"> 
    <template> 

     <custom-style> 
      <style is="custom-style"> 
       html { 

        --center-on-screen: { 
         left: 50%; 
         top: 50%; 
         position: absolute; 
         border: solid 1px red; 
        }; 

       } 
      </style> 
     </custom-style> 

     <style> 

      .signal { 
       border-radius: 30px; 
       height: 30px; 

       width: 30px; 
       @apply --center-on-screen; 
      } 

     </style> 

     <div class="signal"></div> 

    </template> 

    <script> 
     'use strict' 

     class XTest extends Polymer.Element { 

      static get is() { 
       return 'x-test'; 
      } 

      static get properties() { 
       return { 
       } 
      } 

      static get observers() { 
       return []; 
      } 


      constructor() { 
       super(); 


      } 

      ready() { 
       super.ready(); 

      } 

      connectedCallback() { 
       super.connectedCallback(); 
      } 

      connectedCallback() { 
       super.connectedCallback(); 
      } 

     } 

     customElements.define(XTest.is, XTest); 
    </script> 
</dom-module>

當代碼@apply --center-屏幕上;在課堂上，我會期待div的顏色爲紅色並且在屏幕上居中。我已經驗證了它，因爲我已經在類--signal的屏幕上顯示了所有的代碼。爲了測試目的，我將它移到了屏幕中央。如果任何人都可以告訴我我做錯了什麼。

** **更新

當我移動--center-屏幕爲：主機的話，它的工作原理。所以它看起來像這樣

 <style> 

      :host { 
       --center-on-screen: { 
        left: 50%; 
        top: 50%; 
        position: absolute; 
        border: solid 1px red; 
       } 
      } 

      .signal { 
       border-radius: 30px; 
       height: 30px; 

       width: 30px; 
       border: solid 1px red; 
       @apply --center-on-screen; 
      } 

     </style>

來源

2017-04-15 adviner

嘗試包括CD黑幕CSS混入：

<link rel="import" href="../../bower_components/shadycss/apply-shim.html">

CSS自定義屬性正廣泛地支持CSS混入仍然是一個建議。所以對CSS mixins的支持已經被移到了一個單獨的填充程序中，該填充程序對於2.0類樣式的元素是可選的。爲了向後兼容，polymer.html導入包括CSS mixin填充。類樣式元素必須明確導入mixin填充。

編號：https://www.polymer-project.org/2.0/docs/upgrade#class-based-elements-import-the-css-mixin-shim

來源

2017-04-27 12:52:30 Nicolas

感謝張貼此查詢。我正在尋找一些關於如何在聚合物2.0中使用css mixins的可靠資源。

我有這樣的mixin -

--calendarbox-mixin: { 
    display:flex; 
    position:relative; 
    flex-direction: column;   
    border-radius: 5px; 
    --webkit-border-radius:5px; 
    --moz-border-radius:5px; 
    width:11vw; 
    margin:10px 5px;  
    text-align: center; 
    height:18vh; 
    justify-content: space-around; 
    }

我嘗試添加它只是abover另一個類，我想用混入 -

.dayfare_box { 
     @apply(--calendarbox-mixin); 
     background: #fbfcfc; 
     border:2px solid #e2e2e2; 
    }

輸出來不應用的混入。試圖添加：主機，它的工作！

剛剛偶然發現了這個鏈接，它證實了我對我是否做得對的懷疑。感謝發貼:)

來源

2017-07-07 08:38:29

聚合物2適用MIXIN

回答

相關問題