CSS變數的各種玩法！！

css很美妙，能夠為您的頁面穿上衣裳，各種各樣五彩斑斕的衣裳，但是對於開發者來說，他又不夠靈動，於是乎有了各種各樣的預處理器sass、less、stylus（筆者建議sass的scss語法），這些預處理器可以很大程度的提高css的靈活性，增強css的**組織與維護。但是畢竟不是親生的，然後負責css開發的那些大牛們坐不住了，開始給css賦予一些新的特性，本文就來**下css變數的進展與應用。 

w3c的關於css變數的最新探索體現在css custom properties for cascading variables module level 1中，最新更新在2023年5月6日，目前為工作草案，所以本文章只為研究探索只用，所涉知識點存在修改的風險，w3c修改之後本文會同步更新。

我們知道，乙個**或應用往往包含大量的css，這些css裡的一些屬性值往往重複使用，比如**使用的顏色體系，背景色、文字顏色、鏈結顏色等，這些重複使用的屬性值散落在大量的css文件中，如果需要修改其中的一些值，例如改版顏色，那簡直是個噩夢，我們需要每個檔案進行查詢、替換，眼花繚亂、機械重複的大量操作難免出錯、難免頭大，所以css**的組織與維護已經成了困擾css使用的重要瓶頸。 

當然，css預處理可以有效的解決這些問題，預處理器的使用已經成了事實上的行業標準，sass正成為越來越多前端er的選擇。但是，我們需要部署編譯環境、需要讓開發工具支援sass等，需要一些額外的工作。遇事不免暢想，如果有一天，我們可以像使用普通css那些使用預處理器？ 

於是便有了w3c的css various。

關於變數，不外乎定義和使用，接下來我們分別解析。

我們把需要重複使用的值存放到乙個自定義的屬性中，這個自定義的屬性用雙虛線開頭標識，如下面**所示。

/* 變數定義 */

:root
/* 變數使用 */
#foo
h1

自定義屬性名和變數名遵循css識別符號的定義規則，可以包含字母數字(a-z,a-z,0-9)、iso 10646字元列表的u+00a0及以上字元、下劃線(_)、連字元(-)等，不能以數字、連字元+數字、雙連字元開始。 

css變數語法中，大小寫敏感，可以包含字母、數字、下劃線、連字元，且最好不以數字、連字元開頭。

/* 正確的變數名 */

:root
/* 下面兩個變數都有效，表示兩個變數 */
:element

變數的繼承和覆蓋

變數的宣告和使用遵循css的層疊特性，類似於普通程式語言裡面的變數作用域。請看下面的**。

:root

div#alert
* iinherited
blue
from
theroot
element!p>
igotgreen
setdirectly
onme!div>
id='alert'>
while
igot
redset
directly
onme!
i』mred
too, because
ofinheritance!p>
div>我們可以通過var()的方式使用變數，但是不能在屬性名、選擇器中使用變數，只能在屬性值中使用變數，使用變數的語法如下所示。
/* * var()接受兩個引數，自定義屬性名(變數名)、預設值
* 第乙個引數custom-property-name呼叫變數
* 第二引數可選，指定自定義變數無效時的預設值。
*/var() = var(  [, ]? )
/* for example */
/* in the component』s style: */
.component
.header
.component
.text
.component

/*one example */

:root
/*another example */
two>one>
onetwo
three

首先來看看，css變數目前的慘不忍睹的相容性，如下圖所示，資料來自caniuse。 

全線飄紅有木有，只有firefox認識，還怎麼玩。 

有兄弟說，我就要任性，就要玩怎麼辦？老外寫了個補丁(polyfill)，大家不妨一試。

js型別轉換的各種玩法

前言 對於object和number string boolean之間的轉換關係 toprimitive是指轉換為js內部的原始值，如果是非原始值則轉為原始值，呼叫valueof 和tostring 來實現。valueof返回物件的值 在控制台，當你定義乙個物件按回車，控制台列印的是object，t...

js型別轉換的各種玩法

前言 對於object和number string boolean之間的轉換關係 toprimitive是指轉換為js內部的原始值，如果是非原始值則轉為原始值，呼叫valueof 和tostring 來實現。valueof返回物件的值 在控制台，當你定義乙個物件按回車，控制台列印的是object，t...

js型別轉換的各種玩法

前言 對於object和number string boolean之間的轉換關係 toprimitive是指轉換為js內部的原始值，如果是非原始值則轉為原始值，呼叫valueof 和tostring 來實現。valueof返回物件的值 在控制台，當你定義乙個物件按回車，控制台列印的是object，t...