css裡面能用var變數；可以利用var()函數來插入css變數的值，css變數可以存取DOM，也可以利用該函數來讀取變量，語法為「var(變數名稱, value)”，第二個參數的值可用來表示變數的預設值。
本教學操作環境：windows10系統、CSS3&&HTML5版本、Dell G3電腦。
var() 函數用來插入自訂的屬性值，如果一個屬性值在多處被使用，方法就很有用。
var() 函數用來插入 CSS 變數的值。
CSS 變數可以存取 DOM，這表示您可以建立具有局部或全域範圍的變量，使用 JavaScript 來修改變量，以及基於媒體查詢來修改變數。
使用 CSS 變數的一種好方法涉及設計的顏色。您可以將它們放在變數中，而不必一遍又一遍地複製和貼上相同的顏色。
var() 函數的語法如下：
var(name, value)
name 必要。變數名（以兩條破折號開頭）。
value 可選。回退值（在未找到變數時使用）。
var() 如何運作
首先：CSS 變數可以有全域或局部作用域。
全域變數可以在整個文件中存取/使用，而局部變數只能在宣告它的選擇器內部使用。
如需建立具有全域作用域的變量，請在 :root 選擇器中聲明它。 :root 選擇器符合文件的根元素。
如需建立具有局部作用域的變量，請在將要使用它的選擇器中宣告它。
下面的例子與上面的例子相同，但在這裡我們使用 var() 函數。
首先，我們宣告兩個全域變數（--blue 和 --white）。然後，我們使用var() 函數稍後在樣式表中插入變數的值：
實例
<!DOCTYPE html>
<html>
<head>
<style>
:root {
--blue: #1e90ff;
--white: #ffffff;
}
body {
background-color: var(--blue);
}
h2 {
border-bottom: 2px solid var(--blue);
}
.container {
color: var(--blue);
background-color: var(--white);
padding: 15px;
}
button {
background-color: var(--white);
color: var(--blue);
border: 1px solid var(--blue);
padding: 5px;
}
</style>
</head>
<body>
<h1>使用 var() 函数</h1>
<div class="container">
<h2>Welcome to Shanghai!</h2>
<p>Shanghai is one of the four direct-administered municipalities of the People's Republic of China.</p>
<p>Shanghai is one of the four direct-administered municipalities of the People's Republic of China.</p>
<p>
<button>Yes</button>
<button>No</button>
</p>
</div>
</body>
</html>輸出結果：
css影片教學）
以上是css裡面能用var變數嗎的詳細內容。更多資訊請關注PHP中文網其他相關文章！
