整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
復雜的網站都會有大量的CSS代碼，通常也會有許多重復的值。
舉個例子，同樣一個顏色值可能在成千上百個地方被使用到，如果這個值發生了變化，需要全局搜索并且一個一個替換，效率不高且容易出錯。
自定義屬性在某個地方存儲一個值，然后在其他許多地方引用它。另一個好處是語義化的標識。比如，--main-text-color 會比 #00ff00 更易理解，尤其是這個顏色值在其他上下文中也被使用到。
自定義屬性（有時候也被稱作CSS變量或者級聯變量）是由CSS作者定義的，它包含的值可以在整個文檔中重復使用。
由自定義屬性標記設定值（比如： --main-color: black;），由 var() 函數來獲取值（比如： color: **var(--main-color)**;）。
在構建大型站點時，作者通常會面對可維護性的挑戰。在這些網頁中，所使用的CSS 的數量是非常龐大的，并且在許多場合大量的信息會重復使用。
例如，在網頁中維護一個配色方案，意味著一些顏色在 CSS 文件中多次出現，并被重復使用。當你修改配色方案時，不論是調整某個顏色或完全修改整個配色，都會成為一個復雜的問題，不容出錯，而單純查找替換是遠遠不夠的。
如果使用了CSS 框架，這種情況會變得尤其糟糕，此時如果要修改顏色，則需要對框架本身進行修改。
在這些場合使用 LESS 或 Sass 類似的預處理器是非常有幫助的，但是這種通過添加額外步驟的方式，可能會增加系統的復雜性。
CSS變量為我們帶來一些預處理器的便利，并且不需要額外的編譯。
這些變量的第二個優勢就是名稱本身就包含了語義的信息。CSS 文件變得易讀和理解。main-text-color比文檔中的#00ff00更容易理解，特別是同樣的顏色出現在不同的文件中的時候。
下面是 CSS 變量的使用方法和步驟。
我們都知道，在 JS 中要使用一個變量前，必須聲明這個表變量。在 CSS 中也是一樣的道理。
聲明一個自定義屬性，屬性名需要以兩個減號（--）開始，屬性值則可以是任何有效的CSS值。和其他屬性一樣，自定義屬性也是寫在規則集之內的，如下：
body {
--bg-color: #7F583F;
--color: #F7EFD2;
}上面代碼中，body選擇器里面聲明了兩個變量：--bg-color和--color。
它們與color、font-size等正式屬性沒有什么不同，只是沒有默認含義。所以 CSS 變量（CSS variable）又叫做**"CSS 自定義屬性"**（CSS custom properties）。
規則集所指定的選擇器定義了自定義屬性的可見作用域。通常的最佳實踐是定義在根偽類 :root下，這樣就可以在HTML文檔的任何地方訪問到它了：
:root {
--main-bg-color: #eee;
}自定義屬性名是大小寫敏感的，--my-color 和 --My-color 會被認為是兩個不同的自定義屬性。
通過var()函數來讀取變量。語法如下:
var(custom-property-name, value)變量名稱必須以兩個破折號（--）開頭，且區分大小寫！
使用方法：
element {
background-color: var(--main-bg-color);
}變量也可以使用在變量聲明中：
:root {
--primary-color: #eee;
--primary-bg-color: var(--main-bg-color);
}變量值只能用作屬性值，不能用作屬性名。
在 JS 代碼中，我們可能需要讀取 CSS 變量的值，其方法如下：
const root = document.querySelector(":root");
// 設置 CSS 變量
root.style.setProperty("--main-bg-color", "red");
// 讀取 CSS 變量
const computedStyle = getComputedStyle(root);
const mainBgColor = computedStyle.getPropertyValue("--main-bg-color");
console.log(mainBgColor);
// 刪除 CSS 變量
root.style.removeProperty("--main-bg-color");以上就是關于 CSS 變量的一些基本概念及使用方法，更多詳情待后續！
靈活使用 CSS 變量，不僅可以提高生產力，也能夠提高代碼的可閱讀性和維護性。
~
~
~ 本文完
學習有趣的知識，結識有趣的朋友，塑造有趣的靈魂！
大家好！我是〖編程三昧〗的作者 隱逸王，我的公眾號是『編程三昧』，歡迎關注，希望大家多多指教！
知識與技能并重，內力和外功兼修，理論和實踐兩手都要抓、兩手都要硬！
例
對文檔中的文本進行格式化：
<code>一段電腦代碼</code>
瀏覽器支持
所有主流瀏覽器都支持 <code> 標簽。
標簽定義及使用說明
<code> 標簽是一個短語標簽，用來定義計算機代碼文本。
提示：我們并不反對使用這個標簽，但是如果您只是為了達到某種視覺效果而使用這個標簽的話，我們建議您使用 CSS ，這樣可能會取得更豐富的效果。
所有短語標簽：
| 標簽 | 描述 |
|---|---|
| <em> | 呈現為被強調的文本。 |
| <strong> | 定義重要的文本。 |
| <dfn> | 定義一個定義項目。 |
| <code> | 定義計算機代碼文本。 |
| <samp> | 定義樣本文本。 |
| <kbd> | 定義鍵盤文本。它表示文本是從鍵盤上鍵入的。它經常用在與計算機相關的文檔或手冊中。 |
| <var> | 定義變量。您可以將此標簽與 <pre> 及 <code> 標簽配合使用。 |
HTML 4.01 與 HTML5之間的差異
無。
全局屬性
<code> 標簽支持 HTML 的全局屬性。
事件屬性
<code> 標簽支持 HTML 的事件屬性。
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！
(1)css中聲明變量
--color：red(2)使用變量
color:var(--color) //color:red獲取到全局聲明變量值為red(1)在html標簽中
<span :style="{'--color':變量color}" ref='devcolor' />data中聲明變量color
data() {
return {
color: red,
};
}或者使用this.$refs.devcolor.style.setProperty('--color',this.color)
(2)css中使用color變量
color:var(--color) //使用變量color：red*請認真填寫需求信息，我們會在24小時內與您取得聯系。
