日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問(wèn)題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案
如果你覺(jué)得自己對(duì)CSS變量不熟悉，那么可以補(bǔ)充這個(gè)！

CSS變量(又名自定義屬性)已在Web瀏覽器中支持了近四年。我一般也會(huì)根據(jù)項(xiàng)目情況使用它們。它們非常有用且易于使用，但是前端開(kāi)發(fā)人員通常可能會(huì)誤用或誤解它們。

創(chuàng)新互聯(lián)建站為您提適合企業(yè)的網(wǎng)站設(shè)計(jì)?讓您的網(wǎng)站在搜索引擎具有高度排名，讓您的網(wǎng)站具備超強(qiáng)的網(wǎng)絡(luò)競(jìng)爭(zhēng)力！結(jié)合企業(yè)自身，進(jìn)行網(wǎng)站設(shè)計(jì)及把握，最后結(jié)合企業(yè)文化和具體宗旨等，才能創(chuàng)作出一份性化解決方案。從網(wǎng)站策劃到成都做網(wǎng)站、成都網(wǎng)站建設(shè)， 我們的網(wǎng)頁(yè)設(shè)計(jì)師為您提供的解決方案。

簡(jiǎn)介

CSS變量是在CSS文檔中定義的值，其目的是可重用性并減少CSS值中的冗余。下面是一個(gè)基本示例。

 
 
 
 
    
  
  
  
  
  1. .section { 
    2.   
  
  
  
  2.   border: 2px solid #235ad1; 
    3.   
  
  
  
  3. } 
    4.   
  
  
  
  4.  
    5.   
  
  
  
  5. .section-title { 
    6.   
  
  
  
  6.   color: #235ad1; 
    7.   
  
  
  
  7. } 
    8.   
  
  
  
  8.  
    9.   
  
  
  
  9. .section-title::before { 
    10.   
  
  
  
  10.   content: ""; 
    11.   
  
  
  
  11.   display: inline-block; 
    12.   
  
  
  
  12.   width: 20px; 
    13.   
  
  
  
  13.   height: 20px; 
    14.   
  
  
  
  14.   background-color: #235ad1; 
    15.   
  
  
  
  15. } 
    16.

在此代碼段中，#235ad1使用了3次。想象一下，對(duì)于一個(gè)大型項(xiàng)目，不同的CSS文件，如果哪天被要求更改顏色。我們可以做的最好快的方式就是“查找并替換”。

使用CSS變量，可以更快解決這個(gè)問(wèn)題。定義變量名需要用--開(kāi)頭。首先，我們現(xiàn)在將在:root或元素中定義變量。

 
 
 
 
    
  
  
  
  
  1. :root { 
    2.   
  
  
  
  2.   --color-primary: #235ad1; 
    3.   
  
  
  
  3. } 
    4.   
  
  
  
  4.  
    5.   
  
  
  
  5. .section { 
    6.   
  
  
  
  6.   border: 2px solid var(--color-primary); 
    7.   
  
  
  
  7. } 
    8.   
  
  
  
  8.  
    9.   
  
  
  
  9. .section-title { 
    10.   
  
  
  
  10.   color: var(--color-primary); 
    11.   
  
  
  
  11. } 
    12.   
  
  
  
  12.  
    13.   
  
  
  
  13. .section-title::before { 
    14.   
  
  
  
  14.   /* Other styles */ 
    15.   
  
  
  
  15.   background-color: var(--color-primary); 
    16.   
  
  
  
  16. } 
    17.

是不是比前面的干凈得多?--color-primary變量是全局變量，因?yàn)槲覀冊(cè)?root元素中定義了它。但是，我們還可以將變量范圍限定到整個(gè)文檔中的某些元素。

命名變量

與編程語(yǔ)言命名變量相似，CSS 變量的有效命名應(yīng)包含字母數(shù)字字符，下劃線和破折號(hào)。另外，值得一提的是 CSS 變量區(qū)分大小寫。

 
 
 
 
    
  
  
  
  
  1. /* 合法命名 */ 
    2.   
  
  
  
  2. :root { 
    3.   
  
  
  
  3.  --primary-color: #222; 
    4.   
  
  
  
  4.  --_primary-color: #222; 
    5.   
  
  
  
  5.  --12-primary-color: #222; 
    6.   
  
  
  
  6.  --primay-color-12: #222; 
    7.   
  
  
  
  7. } 
    8.   
  
  
  
  8.  
    9.   
  
  
  
  9. /* 非法命名 */ 
    10.   
  
  
  
  10. :root { 
    11.   
  
  
  
  11.  --primary color: #222; /* Spacings are not allowed */ 
    12.   
  
  
  
  12.  --primary$%#%$# 
    13.   
  
  
  
  13. } 
    14.

作用域CSS 變量也有自己的作用域，這個(gè)概念類似于其他編程語(yǔ)言。以 JS 為例:

 
 
 
 
    
  
  
  
  
  1. :root { 
    2.   
  
  
  
  2.   --primary-color: #235ad1; 
    3.   
  
  
  
  3. } 
    4.   
  
  
  
  4.  
    5.   
  
  
  
  5. .section-title { 
    6.   
  
  
  
  6.   --primary-color: d12374; 
    7.   
  
  
  
  7.   color: var(--primary-color); 
    8.   
  
  
  
  8. } 
    9.

變量element是全局的，因此可以在cool()函數(shù)內(nèi)部訪問(wèn)。但是，只能在cool()函數(shù)中訪問(wèn)變量otherElement。

 
 
 
 
    
  
  
  
  
  1. :root { 
    2.   
  
  
  
  2.   --primary-color: #235ad1; 
    3.   
  
  
  
  3. } 
    4.   
  
  
  
  4.  
    5.   
  
  
  
  5. .section-title { 
    6.   
  
  
  
  6.   --primary-color: d12374; 
    7.   
  
  
  
  7.   color: var(--primary-color); 
    8.   
  
  
  
  8. } 
    9.

變量--primary-color是全局變量，可以從文檔中的任何地方訪問(wèn)。變量--primary-color由于是在.section-title定義的，所以只能在.section-title中訪問(wèn)。

下面是一個(gè)比較直觀的示例圖片，可以加強(qiáng)我們的理解：

變量--primary-color用于標(biāo)題顏色。我們想為作者名和最新文章標(biāo)題自定義顏色，因此我們需要將--primary-color覆蓋。這同樣適用于--unit變量。

 
 
 
 
    
  
  
  
  
  1. /* 全局變量 */ 
    2.   
  
  
  
  2. :root { 
    3.   
  
  
  
  3.   --primary-color: #235ad1; 
    4.   
  
  
  
  4.   --unit: 1rem; 
    5.   
  
  
  
  5. } 
    6.   
  
  
  
  6.  
    7.   
  
  
  
  7. /* section-title 默認(rèn)的顏色和間距 */ 
    8.   
  
  
  
  8. .section-title { 
    9.   
  
  
  
  9.   color: var(--primary-color); 
    10.   
  
  
  
  10.   margin-bottom: var(--unit); 
    11.   
  
  
  
  11. } 
    12.   
  
  
  
  12.  
    13.   
  
  
  
  13. /* 覆蓋 section-title 樣式 */ 
    14.   
  
  
  
  14. .featured-authors .section-title { 
    15.   
  
  
  
  15.   --primary-color: #d16823; 
    16.   
  
  
  
  16. } 
    17.   
  
  
  
  17.  
    18.   
  
  
  
  18. .latest-articles .section-title { 
    19.   
  
  
  
  19.   --primary-color: #d12374; 
    20.   
  
  
  
  20.   --unit: 2rem; 
    21.   
  
  
  
  21. } 
    22.

回退方案

這里的回退不是不支持 CSS 變量的回退，而是 CSS 變量可以支持回退方案。考慮以下示例：

 
 
 
 
    
  
  
  
  
  1. .section-title { 
    2.   
  
  
  
  2.   color: var(--primary-color, #222); 
    3.   
  
  
  
  3. } 
    4.

注意，var()有多個(gè)值。第二個(gè)#221只在變量--primary-color由于某種原因沒(méi)有定義的情況下有效。不僅如此，我們還可以將var()嵌套到另一個(gè)var()中。

 
 
 
 
    
  
  
  
  
  1. .section-title { 
    2.   
  
  
  
  2.   color: var(--primary-color, var(--black, #222)); 
    3.   
  
  
  
  3. } 
    4.

在變量值依賴于某個(gè)動(dòng)作的情況下，該特性非常有用。當(dāng)變量沒(méi)有值時(shí)，為它提供一個(gè)回退很重要。

用例一：控制組件的大小

在設(shè)計(jì)系統(tǒng)中，按鈕通常有多種尺寸。通常，按鈕可以具有三種尺寸(Small, normal, large)。使用 CSS 變量來(lái)實(shí)現(xiàn)它并不容易：

 
 
 
 
    
  
  
  
  
  1. .button { 
    2.   
  
  
  
  2.   --unit: 1rem; 
    3.   
  
  
  
  3.   padding: var(--unit); 
    4.   
  
  
  
  4. } 
    5.   
  
  
  
  5.  
    6.   
  
  
  
  6. .button--small { 
    7.   
  
  
  
  7.   --unit: 0.5rem; 
    8.   
  
  
  
  8. } 
    9.   
  
  
  
  9.  
    10.   
  
  
  
  10. .button--large { 
    11.   
  
  
  
  11.   --unit: 1.5rem; 
    12.   
  
  
  
  12. } 
    13.

通過(guò)在按鈕組件作用域內(nèi)更改變量--unit，我們創(chuàng)建了按鈕的不同變體。

用例二：CSS 變量和 HSL 顏色

HSL代表色調(diào)，飽和度，亮度。色相的值決定了顏色，飽和度和亮度值可以控制顏色的深淺。

 
 
 
 
    
  
  
  
  
  1. :root { 
    2.   
  
  
  
  2.   --primary-h: 221; 
    3.   
  
  
  
  3.   --primary-s: 71%; 
    4.   
  
  
  
  4.   --primary-b: 48%; 
    5.   
  
  
  
  5. } 
    6.   
  
  
  
  6.  
    7.   
  
  
  
  7. .button { 
    8.   
  
  
  
  8.   background-color: hsl(var(--primary-h), var(--primary-s), var(--primary-b)); 
    9.   
  
  
  
  9.   transition: background-color 0.3s ease-out; 
    10.   
  
  
  
  10. } 
    11.   
  
  
  
  11.  
    12.   
  
  
  
  12. /* 使背景更暗 */ 
    13.   
  
  
  
  13. .button:hover { 
    14.   
  
  
  
  14.   --primary-b: 33%; 
    15.   
  
  
  
  15. } 
    16.

這里何通過(guò)減小變量--primary-b使按鈕變暗。

用例三：比例調(diào)整

如果您使用過(guò)Photoshop，Sketch，F(xiàn)igma或Adobe XD之類的設(shè)計(jì)程序，那么我們會(huì)想在調(diào)整元素大小的同時(shí)按住Shift鍵以避免扭曲它。

在CSS中，沒(méi)有直接的方法來(lái)做到這一點(diǎn)，但是我們有一個(gè)簡(jiǎn)單的解決方法，使用CSS變量。

假設(shè)有一個(gè)圖標(biāo)，并且其寬度和高度應(yīng)該相等。我定義了變量--size，用于寬度和高度。

 
 
 
 
    
  
  
  
  
  1. .icon { 
    2.   
  
  
  
  2.   --size: 22px; 
    3.   
  
  
  
  3.   width: var(--size); 
    4.   
  
  
  
  4.   height: var(--size); 
    5.   
  
  
  
  5. } 
    6.

現(xiàn)在，您只需更改--size變量的值即可模擬Shift調(diào)整大小的效果。

用例四：CSS Grid

CSS 變量對(duì)于網(wǎng)格非常有用。假設(shè)希望網(wǎng)格容器根據(jù)定義的首選寬度顯示其子項(xiàng)。與為每個(gè)變體創(chuàng)建類并復(fù)制CSS相比，使用變量更容易做到這一點(diǎn)。

 
 
 
 
    
  
  
  
  
  1. .wrapper { 
    2.   
  
  
  
  2.   --item-width: 300px; 
    3.   
  
  
  
  3.   display: grid; 
    4.   
  
  
  
  4.   grid-template-columns: repeat(auto-fill, minmax(var(--item-width), 1fr)); 
    5.   
  
  
  
  5.   grid-gap: 1rem; 
    6.   
  
  
  
  6. } 
    7.   
  
  
  
  7.  
    8.   
  
  
  
  8. .wrapper-2 { 
    9.   
  
  
  
  9.   --item-width: 500px; 
    10.

這樣，我們可以創(chuàng)建一個(gè)完整的網(wǎng)格系統(tǒng)，該系統(tǒng)靈活，易于維護(hù)，并且可以在其他項(xiàng)目中使用?？梢詫⑾嗤母拍顟?yīng)用于grid-gap屬性。

 
 
 
 
    
  
  
  
  
  1. wrapper { 
    2.   
  
  
  
  2.   --item-width: 300px; 
    3.   
  
  
  
  3.   --gap: 0; 
    4.   
  
  
  
  4.   display: grid; 
    5.   
  
  
  
  5.   grid-template-columns: repeat(auto-fill, minmax(var(--item-width), 1fr)); 
    6.   
  
  
  
  6. } 
    7.   
  
  
  
  7.  
    8.   
  
  
  
  8. .wrapper.gap-1 { 
    9.   
  
  
  
  9.   --gap: 16px; 
    10.   
  
  
  
  10. } 
    11.

用例五：全值聲明，CSS 漸變

以全值表示，例如，類似漸變的東西。如果整個(gè)系統(tǒng)中使用漸變或背景，將其存儲(chǔ)到CSS變量中可能是一件好事。

 
 
 
 
    
  
  
  
  
  1. :root { 
    2.   
  
  
  
  2.   --primary-gradient: linear-gradient(150deg, #235ad1, #23d1a8); 
    3.   
  
  
  
  3. } 
    4.   
  
  
  
  4.  
    5.   
  
  
  
  5. .element { 
    6.   
  
  
  
  6.   background-image: var(--primary-gradient); 
    7.   
  
  
  
  7. } 
    8.

或者我們可以存儲(chǔ)一個(gè)值。以角度為例:

 
 
 
 
    
  
  
  
  
  1. .element { 
    2.   
  
  
  
  2.   --angle: 150deg; 
    3.   
  
  
  
  3.   background-image: linear-gradient(var(--angle), #235ad1, #23d1a8); 
    4.   
  
  
  
  4. } 
    5.   
  
  
  
  5.  
    6.   
  
  
  
  6. .element.inverted { 
    7.   
  
  
  
  7.   --angle: -150deg; 
    8.   
  
  
  
  8. } 
    9.

用例六：Background Position

我們可以在 CSS 變量中包含多個(gè)值，這在需要根據(jù)特定上下文將元素放置在不同位置的情況下很有用。

 
 
 
 
    
  
  
  
  
  1. .table { 
    2.   
  
  
  
  2.   --size: 50px; 
    3.   
  
  
  
  3.   --pos: left center; 
    4.   
  
  
  
  4.   background: #ccc linear-gradient(#000, #000) no-repeat; 
    5.   
  
  
  
  5.   background-size: var(--size) var(--size); 
    6.   
  
  
  
  6.   background-position: var(--pos); 
    7.   
  
  
  
  7. } 
    8.

用例七：在明暗模式之間切換

現(xiàn)在，網(wǎng)站比以往任何時(shí)候都更需要深色和淺色模式。使用CSS變量，我們可以存儲(chǔ)它們的兩個(gè)版本，并根據(jù)用戶或系統(tǒng)偏好在它們之間切換。

 
 
 
 
    
  
  
  
  
  1. :root { 
    2.   
  
  
  
  2.   --text-color: #434343; 
    3.   
  
  
  
  3.   --border-color: #d2d2d2; 
    4.   
  
  
  
  4.   --main-bg-color: #fff; 
    5.   
  
  
  
  5.   --action-bg-color: #f9f7f7; 
    6.   
  
  
  
  6. } 
    7.   
  
  
  
  7.  
    8.   
  
  
  
  8. /* 添加到``元素的類*/ 
    9.   
  
  
  
  9. .dark-mode { 
    10.   
  
  
  
  10.   --text-color: #e9e9e9; 
    11.   
  
  
  
  11.   --border-color: #434343; 
    12.   
  
  
  
  12.   --main-bg-color: #434343; 
    13.   
  
  
  
  13.   --action-bg-color: #363636; 
    14.   
  
  
  
  14. } 
    15.

用例八：設(shè)置默認(rèn)值

在某些情況下，您將需要使用JavaScript設(shè)置CSS變量。假設(shè)我們需要獲取可擴(kuò)展組件的高度。

變量--details-height-open為空，它將被添加到特定的HTML元素中。當(dāng)JavaScript由于某種原因失敗時(shí)，提供適當(dāng)?shù)哪J(rèn)值或后備值很重要。

 
 
 
 
    
  
  
  
  
  1. .section.is-active { 
    2.   
  
  
  
  2.   max-height: var(--details-height-open, auto); 
    3.   
  
  
  
  3. } 
    4.

auto值是 JS 失敗時(shí)的回退值，并且沒(méi)有定義CSS變量——details-height-open。

用例九：控制 wrapper 寬度

網(wǎng)站wrapper 可以有多種變化。有時(shí)候是需要一個(gè)小包裝一個(gè)頁(yè)面，一個(gè)大包裝另一個(gè)頁(yè)面。在這種情況下，合并CSS變量可能是有用的。

 
 
 
 
    
  
  
  
  
  1. .wrapper { 
    2.   
  
  
  
  2.   --size: 1140px; 
    3.   
  
  
  
  3.   max-width: var(--size); 
    4.   
  
  
  
  4. } 
    5.   
  
  
  
  5.  
    6.   
  
  
  
  6. .wrapper--small { 
    7.   
  
  
  
  7.   --size: 800px; 
    8.   
  
  
  
  8. } 
    9.

用例十一：動(dòng)態(tài)網(wǎng)格項(xiàng)目我們可以在style屬性中添加--item-width變量，僅此而已。例如，這種方法可以幫助建立網(wǎng)格原型。

HTML

 
 
 
 
    
  
  
  
  
  1.  
    2.   
  
  
  
  2.   
     
    3.   
  
  
  
  3.   
     
    4.   
  
  
  
  4.   
     
    5.
 

     

CSS

 
 
 
 
    
  
  
  
  
  1. .wrapper { 
    2.   
  
  
  
  2.   display: grid; 
    3.   
  
  
  
  3.   grid-template-columns: repeat(auto-fill, minmax(var(--item-width), 1fr)); 
    4.   
  
  
  
  4.   grid-gap: 1rem; 
    5.   
  
  
  
  5. } 
    6.

事例：https://codepen.io/shadeed/pen/7d3e0d575a5cecb86233fc7d72fa90d4

用例十二：用戶頭像

另一個(gè)有用的用例是大小調(diào)整元素。假設(shè)我們需要四種不同大小的用戶頭像，并且只能使用一個(gè)變量來(lái)控制其大小。

 
 
 
 
    
  
  
  
  
  1.  
    2.   
  
  
  
  2.  
    3.   
  
  
  
  3.  
    4.   
  
  
  
  4.  
    5.  
 
 
 
 
 
 
 
    
  
  
  
  
  1. .c-avatar { 
    2.   
  
  
  
  2.   display: inline-block; 
    3.   
  
  
  
  3.   width: calc(var(--size, 1) * 30px); 
    4.   
  
  
  
  4.   height: calc(var(--size, 1) * 30px); 
    5.   
  
  
  
  5. } 
    6.

用例十三：媒體查詢

組合CSS變量和媒體查詢對(duì)于調(diào)整整個(gè)網(wǎng)站中使用的變量非常有用。我能想到的最簡(jiǎn)單的示例是更改間距值。

 
 
 
 
    
  
  
  
  
  1. :root { 
    2.   
  
  
  
  2.   --gutter: 8px; 
    3.   
  
  
  
  3. } 
    4.   
  
  
  
  4.  
    5.   
  
  
  
  5. @media (min-width: 800px) { 
    6.   
  
  
  
  6.   :root { 
    7.   
  
  
  
  7.     --gutter: 16px; 
    8.   
  
  
  
  8.   } 
    9.   
  
  
  
  9. } 
    10.

使用--gutter變量的任何元素都將根據(jù)視口大小更改其間距，這是不是很棒嗎?

用例十四：繼承

是的，CSS變量確實(shí)繼承。如果父元素中定義了CSS變量，那么子元素將繼承相同的CSS變量。我們看下面的例子：

HTML

 
 
 
 
    
  
  
  
  
  1.  
    2.   
  
  
  
  2.   
     
    3.
 

css

 
 
 
 
    
  
  
  
  
  1. .parent { 
    2.   
  
  
  
  2.   --size: 20px; 
    3.   
  
  
  
  3. } 
    4.   
  
  
  
  4.  
    5.   
  
  
  
  5. .child { 
    6.   
  
  
  
  6.   font-size: var(--size); 
    7.   
  
  
  
  7. } 
    8.

.child元素可以訪問(wèn)變量--size，因?yàn)樗鼜母冈乩^承了它。很有趣,那它在實(shí)際的項(xiàng)目中有啥用呢?

我們有一組以下需求的操作項(xiàng)

  • 改變一個(gè)變量就可以改變所有項(xiàng)的大小
  • 間距應(yīng)該是動(dòng)態(tài)的

HTML

 
 
 
 
    
  
  
  
  
  1.  
    2.   
  
  
  
  2.   
 
  •   
    •  
  •   
    •  
  •  

         

    CSS

     
 
 
 
      
  
  
  
  
    1. .actions { 
      2.   
  
  
  
    2.   --size: 50px; 
      3.   
  
  
  
    3.   display: flex; 
      4.   
  
  
  
    4.   gap: calc(var(--size) / 5); 
      5.   
  
  
  
    5. } 
      6.   
  
  
  
    6.  
      7.   
  
  
  
    7. .actions--m { 
      8.   
  
  
  
    8.   --size: 70px; 
      9.   
  
  
  
    9. } 
      10.   
  
  
  
    10.  
      11.   
  
  
  
    11. .actions__item { 
      12.   
  
  
  
    12.   width: var(--size); 
      13.   
  
  
  
    13.   height: var(--size); 
      14.   
  
  
  
    14. } 
      15.

    請(qǐng)注意，這里是如何將變量--size用于flexbox gap屬性的。這意味著間距可以是動(dòng)態(tài)的，并且取決于--size變量。

    另一個(gè)有用的例子是使用CSS變量繼承來(lái)定制CSS動(dòng)畫：

     
 
 
 
      
  
  
  
  
    1. @keyframes breath { 
      2.   
  
  
  
    2.   from { 
      3.   
  
  
  
    3.     transform: scale(var(--scaleStart)); 
      4.   
  
  
  
    4.   } 
      5.   
  
  
  
    5.   to { 
      6.   
  
  
  
    6.     transform: scale(var(--scaleEnd)); 
      7.   
  
  
  
    7.   } 
      8.   
  
  
  
    8. } 
      9.   
  
  
  
    9.  
      10.   
  
  
  
    10. .walk { 
      11.   
  
  
  
    11.   --scaleStart: 0.3; 
      12.   
  
  
  
    12.   --scaleEnd: 1.7; 
      13.   
  
  
  
    13.   animation: breath 2s alternate; 
      14.   
  
  
  
    14. } 
      15.   
  
  
  
    15.  
      16.   
  
  
  
    16. .run { 
      17.   
  
  
  
    17.   --scaleStart: 0.8; 
      18.   
  
  
  
    18.   --scaleEnd: 1.2; 
      19.   
  
  
  
    19.   animation: breath 0.5s alternate; 
      20.   
  
  
  
    20. } 
      21.

    這樣，我們就不需要定義@keyframes兩次，它將繼承.walk和.run元素的定制CSS 變量。

    CSS 變量的工作方式

    當(dāng)var()函數(shù)中的CSS變量無(wú)效時(shí)，瀏覽器將根據(jù)所使用的屬性用初始值或繼承值替換。

     
 
 
 
      
  
  
  
  
    1. :root { 
      2.   
  
  
  
    2.   --main-color: 16px; 
      3.   
  
  
  
    3. } 
      4.   
  
  
  
    4.  
      5.   
  
  
  
    5. .section-title { 
      6.   
  
  
  
    6.   color: var(--main-color); 
      7.   
  
  
  
    7. } 
      8.

    我使用16px是color屬性的值。這是完全錯(cuò)誤的。由于color屬性是繼承的，因此瀏覽器將執(zhí)行以下操作：

    • 該屬性是否可繼承?
      • 如果是，父節(jié)點(diǎn)是否擁有該屬性?
      • 是的，繼承該值
      • 否:設(shè)置為初始值
      • 否:設(shè)置為初始值

    下面解釋瀏覽器工作的流程圖。

    網(wǎng)址值

    我們可能無(wú)法控制網(wǎng)頁(yè)中的所有資源，其中一些必須在線托管。在這種情況下，您可以將鏈接的URL值存儲(chǔ)在CSS變量中。

     
 
 
 
      
  
  
  
  
    1. :root { 
      2.   
  
  
  
    2.   --main-bg: url("https://example.com/cool-image.jpg"); 
      3.   
  
  
  
    3. } 
      4.   
  
  
  
    4.  
      5.   
  
  
  
    5. .section { 
      6.   
  
  
  
    6.   background: var(--main-bg); 
      7.   
  
  
  
    7. } 
      8.

    但是，能想知道是否可以使用url()插入 CSS 變量?？紤]以下

     
 
 
 
      
  
  
  
  
    1. :root { 
      2.   
  
  
  
    2.   --main-bg: "https://example.com/cool-image.jpg"; 
      3.   
  
  
  
    3. } 
      4.   
  
  
  
    4.  
      5.   
  
  
  
    5. .section { 
      6.   
  
  
  
    6.   background: url(var(--main-bg)); 
      7.   
  
  
  
    7. } 
      8.

    由于var(--main-bg)被視為url本身，因此無(wú)效。當(dāng)瀏覽器計(jì)算出該值時(shí)，該值將不再有效，并且將無(wú)法按預(yù)期運(yùn)行。

    存儲(chǔ)多個(gè)值

    CSS 變量也可以表示多個(gè)值，看下面的例子：

     
 
 
 
      
  
  
  
  
    1. :root { 
      2.   
  
  
  
    2.   --main-color: 35, 90, 209; 
      3.   
  
  
  
    3. } 
      4.   
  
  
  
    4.  
      5.   
  
  
  
    5. .section-title { 
      6.   
  
  
  
    6.   color: rgba(var(--main-color), 0.75); 
      7.   
  
  
  
    7. } 
      8.

    在示例中，我們有一個(gè)rgba()函數(shù)，并且RGB值存儲(chǔ)在CSS變量中，以逗號(hào)分隔。如果我們想根據(jù)元素調(diào)整alpha值，這樣做可以提供靈活性。唯一的缺點(diǎn)是無(wú)法使用DevTools顏色選擇器來(lái)調(diào)整rgba值。

    另一個(gè)例子是將它與background屬性一起使用。

     
 
 
 
      
  
  
  
  
    1. :root { 
      2.   
  
  
  
    2.   --bg: linear-gradient(#000, #000) center/50px; 
      3.   
  
  
  
    3. } 
      4.   
  
  
  
    4.  
      5.   
  
  
  
    5. .section { 
      6.   
  
  
  
    6.   background: var(--bg); 
      7.   
  
  
  
    7. } 
      8.   
  
  
  
    8.  
      9.   
  
  
  
    9. .section--unique { 
      10.   
  
  
  
    10.   background: var(--bg) no-repeat; 
      11.   
  
  
  
    11. } 
      12.

    @keyframes規(guī)則中的動(dòng)畫變量

    如果你閱讀過(guò)CSS變量規(guī)范，則可能會(huì)讀到“動(dòng)畫污染”一詞。這個(gè)想法是，在@keyframes規(guī)則中使用CSS變量時(shí)，無(wú)法對(duì)其進(jìn)行動(dòng)畫處理。

    html
     

    CSS

     
 
 
 
      
  
  
  
  
    1. .box { 
      2.   
  
  
  
    2.   width: 50px; 
      3.   
  
  
  
    3.   height: 50px; 
      4.   
  
  
  
    4.   background: #222; 
      5.   
  
  
  
    5.   --offset: 0; 
      6.   
  
  
  
    6.   transform: translateX(var(--offset)); 
      7.   
  
  
  
    7.   animation: moveBox 1s infinite alternate; 
      8.   
  
  
  
    8. } 
      9.   
  
  
  
    9.  
      10.   
  
  
  
    10. @keyframes moveBox { 
      11.   
  
  
  
    11.   0% { 
      12.   
  
  
  
    12.     --offset: 0; 
      13.   
  
  
  
    13.   } 
      14.   
  
  
  
    14.   50% { 
      15.   
  
  
  
    15.     --offset: 50px; 
      16.   
  
  
  
    16.   } 
      17.   
  
  
  
    17.   100% { 
      18.   
  
  
  
    18.     --offset: 100px; 
      19.   
  
  
  
    19.   } 
      20.   
  
  
  
    20. } 
      21.

    動(dòng)畫無(wú)法順利進(jìn)行。它將僅對(duì)值 (0, 50px, 100px)進(jìn)行動(dòng)畫處理。根據(jù)CSS規(guī)范：

    @keyframes規(guī)則中使用的任何自定義屬性都會(huì)受到動(dòng)畫污染，這將影響通過(guò)動(dòng)畫屬性中的var()函數(shù)引用它時(shí)如何處理它。

    如果我們希望上述動(dòng)畫能夠正常工作，則應(yīng)采用老式的方法。這意味著，我們需要用要設(shè)置動(dòng)畫的實(shí)際CSS屬性替換變量。

     
 
 
 
      
  
  
  
  
    1. @keyframes moveBox { 
      2.   
  
  
  
    2.   0% { 
      3.   
  
  
  
    3.     transform: translateX(0); 
      4.   
  
  
  
    4.   } 
      5.   
  
  
  
    5.   50% { 
      6.   
  
  
  
    6.     transform: translateX(50px); 
      7.   
  
  
  
    7.   } 
      8.   
  
  
  
    8.   100% { 
      9.   
  
  
  
    9.     transform: translateX(100px); 
      10.   
  
  
  
    10.   } 
      11.   
  
  
  
    11. } 
      12.

    計(jì)算

    你可能不知道可以使用 CSS 變量進(jìn)行計(jì)算?？紤]下面示例：

     
 
 
 
      
  
  
  
  
    1. .c-avatar { 
      2.   
  
  
  
    2.   display: inline-block; 
      3.   
  
  
  
    3.   width: calc(var(--size, 1) * 30px); 
      4.   
  
  
  
    4.   height: calc(var(--size, 1) * 30px); 
      5.   
  
  
  
    5. } 
      6.

    .c-avatar 大小會(huì)有不同的變化。我將默認(rèn)值設(shè)置為1，所以默認(rèn)大小為(30px * 30px)。注意不同的類變化以及更改--size值如何導(dǎo)致化身的大小變化。

     
 
 
 
      
  
  
  
  
    1. .c-avatar--small { 
      2.   
  
  
  
    2.   --size: 2; 
      3.   
  
  
  
    3. } 
      4.   
  
  
  
    4.  
      5.   
  
  
  
    5. .c-avatar--medium { 
      6.   
  
  
  
    6.   --size: 3; 
      7.   
  
  
  
    7. } 
      8.   
  
  
  
    8.  
      9.   
  
  
  
    9. .c-avatar--large { 
      10.   
  
  
  
    10.   --size: 4; 
      11.   
  
  
  
    11. } 
      12.

    Devtools和CSS變量

    我們可以在瀏覽器DevTools中使用一些有用的技巧，這樣就能更輕松地使用CSS變量。

    看到顏色

    使用CSS變量時(shí)，看到顏色或背景值的視覺(jué)指示器是否有用?Chrome和Edge證明了這一點(diǎn)。

    計(jì)算值

    要查看CSS變量的計(jì)算值，只要將鼠標(biāo)懸?；騿螕艏纯?。

    禁用CSS變量

    當(dāng)我們需要從使用CSS變量的所有元素中禁用CSS變量時(shí)，可以通過(guò)從定義它的元素中取消選中它來(lái)實(shí)現(xiàn)。參見(jiàn)下圖：

    本文介紹了 CSS 變量的很多內(nèi)容，希望能對(duì)你有些幫助，二創(chuàng)不易，還望點(diǎn)個(gè)贊+轉(zhuǎn)發(fā)。

    作者：Ahmad Shadeed 譯者：前端小智 來(lái)源：ishadeed原文：https://ishadeed.com/article/css-vars-101/

    本文轉(zhuǎn)載自微信公眾號(hào)「大遷世界」，可以通過(guò)以下二維碼關(guān)注。轉(zhuǎn)載本文請(qǐng)聯(lián)系大遷世界公眾號(hào)。


    分享文章：如果你覺(jué)得自己對(duì)CSS變量不熟悉，那么可以補(bǔ)充這個(gè)！
    分享網(wǎng)址：http://www.5511xx.com/article/cccgphc.html