CSS變量的使用

前言

自定義屬性（有時可以稱為css變量或者層疊variables）是由css作者定義的實體，這些實體在一個document內可以被重用。一般按照自定義屬性的符號設置（比如，--main-color: black；）然后使用var()函數使用。（例如color: var(--main-color)）

復雜的網站有大量的CSS，通常會有很多重復的值。例如，同一個顏色可能會被在幾百個地方都用到，可以從全局搜索去一次性替換掉。自定義屬性允許這個值存儲在一個地方，然后再多個地方引用。另一個好處是語義標識符號。（semantic identifier）例如，--main-text-color比#00ff00更容易理解，尤其是這個值在其他的上下文中也存在時。

自定義屬性遵循級聯，會從父級繼承它們的值。

 

基本用法

定義一個自定義的屬性需要用--開始，然后屬性的值需要是一個有效的CSS值。
和任何其他的屬性一樣，在一個規則集中定義：

element { --main-bg-color: brown; }

請注意規則集中的選擇器定義了自定義屬性可以使用的scope。一個通常的最佳實踐是定義在:root偽類上，從而可以在html document全局獲得權限：

:root { --main-bg-color: brown; }

不過你也可以在局部scope中使用css變量。

注意：css變量的屬性名大小寫敏感，--my-color會被當作--My-color屬性。

就像上面提到的，使用自定義屬性的話，需要在var()函數中使用。

element { background-color: var(--main-bg-color); }

 

使用自定義屬性的第一步

在不同的class中應用相同的顏色。

.one { color: white; background-color: brown; margin: 10px; width: 50px; height: 50px; display: inline-block; } .two { color: white; background-color: black; margin: 10px; width: 150px; height: 70px; display: inline-block; } .three { color: white; background-color: brown; margin: 10px; width: 75px; } .four { color: white; background-color: brown; margin: 10px; width: 100px; } .five { background-color: brown; }

<div>
  <div class="one">1:</div> <div class="two">2: Text <span class="five">5 - more text</span></div> <input class="three"> <textarea class="four">4: Lorem Ipsum</textarea> </div>

注意css中的重復部分，背景色多次用到，可以聲明一個css變量。不過一般還是在:root上使用：

:root { --main-bg-color: brown; } .one { color: white; background-color: var(--main-bg-color); margin: 10px; width: 50px; height: 50px; display: inline-block; } .two { color: white; background-color: black; margin: 10px; width: 150px; height: 70px; display: inline-block; } .three { color: white; background-color: var(--main-bg-color); margin: 10px; width: 75px; } .four { color: white; background-color: var(--main-bg-color); margin: 10px; width: 100px; } .five { background-color: var(--main-bg-color); }

 

自定義屬性的繼承

自定義屬性會繼承。這也就意味着如果給定的element沒有屬性值，會繼承父元素的值：

.two { --test: 10px; } .three { --test: 2em; }

<div class="one"> <!--invalid--> <div class="two"><!--10px--> <div class="three"></div><!--2em--> <div class="four"></div><!--10px--> </div> </div>

不要試圖把它當做一個和其他語言中的變量一樣的東西，css自定義屬性最終展現形式是computed值，所以不要妄想去子樣式中查找到這個變量。自定義屬性僅僅對匹配到的選擇器和它的子元素有效，和普通css一樣。

 

自定義屬性的回調值

使用var()的時候，可以使用回調函數。
var()函數不僅僅可以用於默認的標簽，對於自定義的標簽和Shadow DOM都適用。

注意：fallback可用於提升兼容性。

規則可以看下面的例子：

.two { color: var(--my-var, red); /* Red if --my-var is not defined */ } .three { background-color: var(--my-var, var(--my-background, pink)); /* pink if --my-var and --my-background are not defined */ } .three { background-color: var(--my-var, --my-background, pink); /* Invalid: "--my-background, pink" */ }

注意：

• 第二種可能會有性能問題，因為要不斷地一層一層往下找。
• 第一個例子中的var(--my-var, red)還可以寫成var(--my-var, red, blue)。

 

有效性和值

與每個屬性相關的經典CSS有效性概念在定制屬性方面不是很有用。當解析自定義屬性的值時，瀏覽器不知道將在何處使用它們，因此必須考慮幾乎所有值都是有效的。不幸的是，這些有效值可以通過var()函數表示法在可能沒有意義的上下文中使用。屬性和自定義變量可能導致無效的CSS語句，從而導致在計算時間有效的新概念。

 

無效的變量會發生什么

1. 檢查是否有父元素可以繼承
2. 設置成默認的初始值

比如這個例子：

<p>This paragraph is initial black.</p> :root { --text-color: 16px; } p { color: blue; } p { color: var(--text-color); }

這個例子中的p的color屬性應用了var函數，但是16px是color的無效屬性值。因此找父元素，但是沒有父元素，所以這個color的值替換為default initial value，替換以后這個屬性就恢復為默認屬性了。

注意：雖然CSS屬性/值對中的語法錯誤將導致該行被忽略。但是使用級聯值、無效替換(使用無效的自定義屬性值)不會被忽略，從而導致該值被繼承。

 

通過js中獲取到的css變量值

// 從行內樣式中中獲取變量 element.style.getPropertyValue("--my-var"); // 從任何地方獲取到變量 getComputedStyle(element).getPropertyValue("--my-var"); // 在行內樣式中設置變量 element.style.setProperty("--my-var", jsVar + 4);

 

var()與rgba()配合實現復用變量

:root { --my-var: 24, 144, 255; } .custom-bg-1 { background-color: rgba(var(--my-var), 0.5); } .custom-bg-2 { background-color: rgba(var(--my-var), 0.7); }

vi設計http://www.maiqicn.com 辦公資源網站大全https://www.wode007.com

vue實戰: 通過顏色選擇器切換熱力圖主題顏色

基於iView的ColorPick組件，實現用戶根據自己的喜好切換主題色。
heat.scss

:root { --heat-cell-bgc: 24, 144, 255; } .custom-alpha-8-1 { background-color: rgba(var(--heat-cell-bgc), 0.125) !important; } .custom-alpha-8-2 { background-color: rgba(var(--heat-cell-bgc), 0.25) !important; } ... .custom-alpha-8-8 { background-color: rgba(var(--heat-cell-bgc), 1) !important; }

colorFilter.vue

const getRGB = (str) => { const match = str.match(/rgba?\((\d{1,3}), ?(\d{1,3}), ?(\d{1,3})\)?(?:, ?(\d(?:\.\d?))\))?/); return match ? { red: match[1], green: match[2], blue: match[3], } : {}; }; export default { name: 'color-filter', data() { return { cellBackgroundColor: 'rgb(24, 144, 255)', }; }, methods: { colorChange(color) { // 抽離出rgb值 const { red, green, blue } = getRGB(color); const rgb = `${red},${green},${blue}`; // 找到root元素 const rootElement = document.documentElement; // 更新背景色css變量 rootElement.style.setProperty('--heat-cell-bgc', rgb); }, }, }; " title="" data-original-title="復制">

<template> <div> <ColorPicker v-model="cellBackgroundColor" placement="bottom-start" @on-change="colorChange" format="rgb" /> </div> </template> <script> const getRGB = (str) => { const match = str.match(/rgba?\((\d{1,3}), ?(\d{1,3}), ?(\d{1,3})\)?(?:, ?(\d(?:\.\d?))\))?/); return match ? { red: match[1], green: match[2], blue: match[3], } : {}; }; export default { name: 'color-filter', data() { return { cellBackgroundColor: 'rgb(24, 144, 255)', }; }, methods: { colorChange(color) { // 抽離出rgb值 const { red, green, blue } = getRGB(color); const rgb = `${red},${green},${blue}`; // 找到root元素 const rootElement = document.documentElement; // 更新背景色css變量 rootElement.style.setProperty('--heat-cell-bgc', rgb); }, }, }; </script> <style lang="scss" scoped> </style>