ZC: 下面文章中，“回退值”的概念比較難懂。我的理解：出現 回退值，則 var()中的第一個傳入參數就自動忽略了... "回退值" 能否使用 CSS變量？

　　ZC: chrome(版本 51.0.2704.63 m)(x86)，沒有看到“回退值” 的效果... “回退值”為變量的情況就 更加無法測試了...

?

參考網址：

　　http://dobit.top/Detail/215.html

　　https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables

　　http://caniuse.com/?中輸入 "css variables"

?

1、

CSS中的變量給了我們諸多優點：方便、代碼重用、更可靠的代碼庫和提升防錯能力。

1、CSS variables示例

1 2 3 4 5 6 7 8 9 10 11

:root?{??? ??--base-font-size:?16px;??? ??--link-color:?#6495ed;??? }??? p?{??? ??font-size:?var(?--base-font-size?);??? }??? a?{??? ??font-size:?var(?--base-font-size?);??? ??color:?var(?--link-color?);??? }

2、CSS variables主要組成

CSS變量主要由以下三部分組成組成：

• 自定義屬性

• var()函數

• :root偽類

①自定義屬性

自定義屬性僅意味著我們自己（創建CSS文件的人）去定義屬性的名字。為了自定義一個屬性名，我們需要用“--”作為前綴，后面緊跟任意變量名。如果我們要創建一個名字為main-bg-color、值為黑色的自定義屬性，可以這樣做：

1 2 3

:root?{??? ??--main-bg-color:?#000000;?/*?--作為前綴，--變量名?*/?? }

②var()函數

通過var()函數使用自定義屬性（即css變量），否則瀏覽器不知道它們代表什么。如果想要在p選擇器中使用--text-color，可以這樣使用var()函數：

1 2 3 4 5 6 7

:root?{??? ??--text-color:?#000000;??? }??? p?{??? ??color:?var(?--text-color?);??/*使用css?變量?*/ ??font-size:?16px;??? }

其等價于：

1 2 3 4

p?{??? ??color:?#000000;??? ??font-size:?16px;??? }

③:root偽類:放置自定義屬性

我們需要一個地方來放置自定義屬性。雖然可以在任何樣式規則中指定自定義屬性，但到處定義屬性并不是一個好主意，這對CSS的可維護性和可閱讀性是一個挑戰。

:root 偽類代表了HTML文檔的根元素，這是一個放置自定義屬性的好位置，因為我們可以通過其他更具特異性的選擇器來覆蓋自定義屬性值。

3、CSS變量的好處

①可維護性

在一個Web開發項目中，我們經常重復使用一個特定的CSS屬性值，如下代碼:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

h1?{??? ??margin-bottom:?20px;??? ??font-size:?42px;??? ??line-height:?120%;??? ??color:?gray;??? }??? p?{??? ??margin-bottom:?20px;??? ??font-size:?18px;??? ??line-height:?120%;??? ??color:?gray;??? }??? img?{??? ??margin-bottom:?20px;??? ??border:?1px?solid?gray;??? }??? .callout?{??? ??margin-bottom:?20px;??? ??border:?3px?solid?gray;??? ??border-radius:?5px;??? }

上面寫法的問題：當需要改變某些屬性值時，如果我們手動的改變屬性值，尤其是當CSS文件很大時，不僅會花費大量時間，還可能會范一些錯誤。同樣的，如果我們執行一個批處理查找和替換,就可能會無意中影響其他樣式規則。我們可以使用CSS變量重寫,代碼如下：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

:root?{??? ??--base-bottombottom-margin:?20px;??? ??--base-line-height:???120%;??? ??--text-color:?????????gray;??? }??? h1?{??? ??margin-bottom:?var(?--base-bottombottom-margin?);??? ??font-size:?42px;??? ??line-height:?var(?--base-line-height?);??? ??color:?var(?--text-color?);??? }??? p?{??? ??margin-bottom:?var(?--base-bottombottom-margin?);??? ??font-size:?18px;??? ??line-height:?var(?--base-line-height?);??? ??color:?var(?--text-color?);??? }??? img?{??? ??margin-bottom:?var(?--base-bottombottom-margin?);??? ??border:?1px?solid?gray;??? }??? .callout?{??? ??margin-bottom:?var(?--base-bottombottom-margin?);??? ??border:?1px?solid?gray;??? ??border-radius:?5px;??? ??color:?var(?--text-color?);??? }

假設現在的客戶說由于文本顏色太亮，導致文本難以閱讀，想要改變文本顏色，此時，我們只需要更新一行CSS規則：

1	--text-color:?black;

②提高CSS的可讀性

自定義屬性會使樣式表更加易讀，也會使CSS屬性聲明更有語義。

將這個聲明:

1 2	background-color:?yellow;? font-size:18px;

和下面的聲明比較一下:

1 2	background-color:?var(?--highlight-color?);??? font-size:?var(?--base-font-size?);

像yellow和18px一類的屬性值并沒有給我們任何有用的上下文信息，但是當我們閱讀如--base-font-size和--highlight-color一樣的屬性名時，即便在其他人的代碼，我們都能馬上知道這個屬性值是在做什么。

4、注意事項

①大小寫敏感

自定義屬性是大小寫敏感的（和普通的CSS規則不一樣）。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

:root?{??? ??--main-bg-color:?green;??? ??--MAIN-BG-COLOR:?RED;??? }??? .box?{??? ??background-color:?var(?--main-bg-color?);?/*?green?background?*/?? }??? .circle?{??? ??VAR(--MAIN-BG-COLOR?);?/*?red?background?*/?? ??border-radius:?9999em;??? }??? .box,??? .circle?{??? ??height:?100px;??? ??width:?100px;??? ??margin-top:?25px;??? ??box-sizing:?padding-box;??? ??padding-top:?40px;??? ??text-align:?center;??? }

注意：--main-bg-color和--MAIN-BG-COLOR是兩個變量。

②自定義屬性值的解析

當重復聲明自定義屬性時，其賦值遵循通常的CSS層疊和繼承規則。例如下面的示例：

1 2 3 4 5 6 7 8 9 10 11 12

:root?{??? ??--highlight-color:?yellow;??? }??? body?{??? ??--highlight-color:?green;??? }??? .container?{??? ??--highlight-color:?red;??? }??? a?{??? ??color:?var(?--highlight-color?);??? }

現在a標簽顏色值為red；當移除.container規則時，鏈接的顏色值將是green。

③回退值

當使用var()函數時，可以分配一個回退的屬性值，其作為一個額外參數，與第一個參數用“,”隔開。看下面的示例：

1 2 3 4 5 6 7 8 9 10 11 12

div?{??? ??--container-bg-color:?black;??? }??? .box?{??? ??width:?100px;??? ??height:?100px;??? ??padding-top:?40px;??? ??box-sizing:?padding-box;??? ??background-color:?var(?--container-bf-color,?red?);???/*red?為回退值*/ ??color:?white;??? ??text-align:?center;??? }

因為給var()傳遞了一個回退值參數，所以div的背景色最終被渲染成紅色。

④無效值

謹防給CSS屬性分配錯誤類型的值。在下面的示例中，由于自定義屬性--small-button被賦予一個長度單位，它被用在.small-button樣式中是無效的(因為color的屬性類型值出錯)。

1 2 3 4 5 6

:root?{??? ??--small-button:?200px;??? }??? .small-button?{??? ?color:?var(--small-button);??? }

避免這種情況的一個好方式是想出具有描述性的自定義屬性名稱。例如將上面的自定義屬性命名為--small-button-width。

5、瀏覽器對css variables的支持

CSS變量用起來很方便，但是瀏覽器對其支持情況不太好，如下圖所示：

?

2、

3、

?

轉載于:https://www.cnblogs.com/h5skill/p/5858169.html

總結

以上是生活随笔為你收集整理的CssVariables_01的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。