開坑，寫點Polymer1.1教程第6篇--樣式（2）_html/css_WEB-ITnose

前言

已經好久沒有更新Polymer專欄，之前幾個月由于受到工作上的突然變故，導致學習和撰寫無法順利開展，好在目前各方面都已經暫時穩定下來，期間有不少對Polymer感興趣的壇友通過評論或者私信的形式向我表達了不要斷更的期望，我在這里也想對他們說聲謝謝。

今天我們繼續Polymer的樣式篇，剛剛在新機器下部署好了Polymer的開發環境，發現時隔2個月Polymer已然悄悄升級到了1.3版本（雖然我還沒去了解新版本的變更），這也說明了Google對這個框架的重視程度，給我們學習Polymer的朋友們打了一針強心劑。（建議大家在閱讀本文前執行bower update命令來更新Polymer到最新版）

正題

跨作用域的樣式

背景

對于Webcomponent而言，Shadow Dom 帶來了很多作用域以及樣式封裝之類的好處，使得組件在CSS影響范圍上變得更加安全和簡單。樣式不會被上層的組件介入影響，更不會被內層組件影響。

這對保護樣式不受未知的，不可控的外界因素所干擾非常有用。但是當你想要刻意去修改一個自定義組件的樣式時該怎么辦？我們經常要面臨這個問題，比如在某個固定的主題（theme）下做一些針對某些組件的特殊的樣式修改。舉個例子，“custom-checkbox”組件使用 .checked這個class，而另外一個component也碰巧使用了.checked 這個class的時候Polymer提供的Shadow Style功能就很好的解決了同名class相互影響，相互污染的問題。

為了解決污染的問題傳統的做法往往是，給css定義加上很多前綴，之前加上很多dom層級的定義（類似于namespace）來區分重名的class，而有了Shadow Style之后，媽媽就再也不擔心class重名了。

自定義CSS屬性（或者稱為變量更加合適）

我們先來看一段代碼，定義一個component

我們可以看到span上的className為title,而titile的定義里出現了奇怪的東西var (xxxxxx)

.title{ color: var(--my-toolbar-title-color);}

我們望文生義一下，從字面上理解這個color應該是個動態的值，具體顏色一定是由外部使用這個component的父component來決定的，而–my-toolbar-title-color應該就是一個變量名，存放外部傳入的具體顏色值。接下去我們再定義一個父component來使用這個my-toolbar

運行結果一目了然，my-toolbar這個component中定義的css變量可以被外部使用它的my-element這個父component賦值。形式上感覺就是–my-toolbar-title-color這個自定義的變量稱為一個新的css屬性，可以被賦值（正如我們小標題上的稱呼—— 自定義css屬性）。

當然你也可以給var –my-toobar-title-color一個默認的初始值，以防外界沒有給它賦值，如

color: var(--my-toolbar-title-color, blue);

這種自定義css屬性，對于擴展我們傳統的樣式十分有幫助，尤其是切換不同配色的主題時，目前Firefox已經原生支持這種寫法，chrome和safari也已經宣稱要支持這一特性，鼓掌！

自定義CSS代碼塊

了解過sass的朋友應該對@mixin不陌生，polymer也提供了整塊整塊定義css樣式的功能，先看代碼，我們對之前的my-toolbar的代碼稍作改動，使用@apply來聲明了2個變量接收mixin的樣式塊。

之后對my-element也做一下修改

運行結果

我們可以看到@apply和之前的var作用其實是類似的，只不過@apply定義的變量接收的是由多條style規則組成的塊。

好了，頁已深，可能講完整個style章節需要總共4-5個小節，今天第2小節就講到到這里吧，我盡量抽時間寫完。

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com