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
* i inherited blue from the root element!
i got green set directly on me!
while i got red set directly on me!
i』m red too, because of inheritance!
/*
* var()接受兩個引數，自定義屬性名(變數名)、預設值
* 第乙個引數custom-property-name呼叫變數
* 第二引數可選，指定自定義變數無效時的預設值。
*/var() = var( [, ]? )
/* for example */
/* in the component』s style: */
.component .header
.component .text
.component
/*one example */
:root
/*another example */
one
two
three
首先來看看，css變數目前的慘不忍睹的相容性，如下圖所示，資料來自caniuse。
全線飄紅有木有，只有firefox認識，還怎麼玩。
有兄弟說，我就要任性，就要玩怎麼辦？老外寫了個補丁(polyfill)，大家不妨一試。
前端開發whqet，關注前端開發，分享相關資源。csdn專家部落格，王海慶希望能對您有所幫助。
多程序介面開發 Qt試玩兒
目錄 四 嵌入notepad 五 呼叫ping命令 六 嵌入其他qwidget窗體 做客戶端開發已經有好幾個年頭了，今天看到同事發了一篇關於富途牛牛的文章，核心思想就是想說，新版本的富途支援多程序架構了，效率大大提公升啦，可以更好的裡有多核cpu，提供軟體執行效率。聽到這個訊息，我不僅感嘆，我靠，真...
css使用變數 使用CSS變數優化CSS長度
css使用變數 您是否曾經不得不編寫大量css，卻迷失了自己的 如果您像我一樣，有時您必須將顏色或文字大小的十六進製制 儲存在可以訪問和重複使用的位置。在本文中，我將分享有關如何使用css變數優化css的知識。css變數是我們定義的值，可在整個css文件中重複使用。css變數 也稱為自定義屬性 在乙...
css 冷知識 css變數
css變數的宣告 變數名前加兩根連線詞 body 各種值都可以放入css變數 變數名大小寫敏感 變數讀取 var 函式 body var 函式可以使用第二個引數,表示變數的預設值。如果該變數不存在,就會使用這個預設值 color var foo,ccc var 函式也可以用在變數的宣告 body 注...