CSS變數 var()的用法是什麼？ CSS變數 var()的用法詳解

當Web專案變得越來越大時，他的CSS會變得像天文數字那麼大而且還變得混亂。為了幫助我們解決這個問題，新的CSS變數很快就會出現在主流瀏覽器中，它讓開發人員能夠重複使用並輕鬆編輯重複出現的CSS屬性。用過SASS或Less的人應該知道他的變數功能有多棒，但這些變數是預處理器，需要在使用前進行編譯。現在變數在vanilla CSS中可用，您可以立即在瀏覽器中使用它們！ 【建議閱讀：CSS教學】

定義和使用CSS變數

與任何其他CSS定義一樣，變數遵循相同的範圍和繼承規則。使用它們的最簡單方法是透過將聲明新增至:root偽類別來使它們全域可用，以便所有其他選擇器都可以繼承它。

html：

:root {
  --awesome-blue：＃2196F3;
}

要存取變數中的值，我們可以使用var(…)語法。請注意，名稱區分大小寫，因此–foo != –FOO。

.element {
background-color:var(--awesome-blue);
}

瀏覽器支援

常用的瀏覽器除了IE都完美支持，您可以在此處獲取更多詳細資訊–[我可以使用CSS變數](https://caniuse .com/#search=var())。下面是幾個例子，展示了CSS變數的典型用法。為確保它們正常工作，請嘗試在我們上面提到的其中一個瀏覽器上查看它們。

範例1 – 主題顏色

當我們需要對多個元素一再應用相同的規則時，CSS中的變數是最有用的，例如主題中的重複顏色。我們不是每次想要重複使用相同顏色時進行複製和貼上，而是將其放在變數中並從那裡訪問它。

現在，如果我們的客戶不喜歡我們選擇的藍色陰影，我們可以在一個地方（變數的定義）改變樣式來改變整個主題的顏色。沒有變量，我們必須手動搜尋和替換每一次出現。

可將程式碼複製下來在你的編輯器裡面測試

* {margin: 0;padding: 0;box-sizing: border-box;}html {padding: 30px;font: normal 13px/1.5 sans-serif;color: #546567;background-color: var(--primary-color);}.container {background: #fff;padding: 20px;}h3 {padding-bottom: 10px;margin-bottom: 15px;}p {background-color: #fff;margin: 15px 0;}button {font-size: 13px;padding: 8px 12px;background-color: #fff;border-radius: 3px;box-shadow: none;text-transform: uppercase;font-weight: bold;cursor: pointer;opacity: 0.8;outline: 0;}button:hover {opacity: 1;}
<!-- 分割线 -->:root {
--primary-color: #B1D7DC;
--accent-color: #FF3F90;
}
html {
background-color: var(--primary-color);
}
h3 {
border-bottom: 2px solid var(--primary-color);
}
button {
color: var(--accent-color);
border: 1px solid var(--accent-color);
}

<div class="container">
<h3>对话框窗口</h3>
<p>过放荡不羁的生活，容易得像顺水推舟，但是要结识良朋益友，却难如登天。</p>
<button>确认</button>
</div>

範例2 – 屬性類別名稱可讀性

變數的另一個重要用途是當我們想要保存更複雜的屬性值時，我們不必記住它。最好的例子就是有多個參數，例如CSS規則box-shadow，transform和font。

透過將屬性放在變數中，我們可以使用語意可讀的名稱來存取它。

html{background-color: #F9F9F9;}
ul{padding: 20px;list-style: none;width: 300px;}
li{font: normal 18px sans-serif;padding: 20px;transition: 0.4s;margin: 10px;color: #444;background-color: #fff;cursor: pointer;}
<!-- 分割线 -->
:root{
--tiny-shadow: 0 2px 1px 0 rgba(0, 0, 0, 0.2);
--animate-right: translateX(20px);
}
li{
box-shadow: var(--tiny-shadow);
}
li:hover{
transform: var(--animate-right);
}

<ul>
<li>我在这里!</li>
<li>我在这里!</li>
<li>我在这里!</li>
</ul>

範例3 – 動態變更變數

當多次宣告自訂屬性時，標準規則有助於解決衝突，樣式表中最後定義的會覆寫上面定義的。

下面的範例示範了使用者動態操作改變屬性是多麼容易，同時仍然保持程式碼清晰簡潔。

.container{background: #fff;padding: 20px;}
p{transition: 0.4s;}
.title{font-weight: bold;}
<!-- 分割线 -->
.blue-container{
--title-text: 18px;
--main-text: 14px;
}
.blue-container:hover{
--title-text: 24px;
--main-text: 16px;
}
.green-container:hover{
--title-text: 30px;
--main-text: 18px;
}
.title{
font-size: var(--title-text);
}
.content{
font-size: var(--main-text);
}

<div class="blue-container">
<div class="green-container">
<div class="container">
<p class="title">这是个标题</p>
<p class="content">将鼠标悬停在不同的颜色区域上可以更改此文本和标题的大小。</p>
</div>
</div>
</div>

[示例地址](https://codepen.io/w3cbest/pen/OrxLLE)
正如您所看到的，CSS变量非常简单易用，开发人员不必花费太多时间在各处开始应用它们。以下是扩展内容：
var()函数有两个参数，如果自定义属性失败，它可用于提供回退值：

width``: var(–custom-width, 20%``);

可以巢狀自訂屬性：

*   –base-color: #f93ce9;
*   –background-gradient: linear-gradient(to top, var(–base-color), #444);

變數可以與CSS的另一個新增功能- calc() 函數結合使用。

*   –container-width: 1000px;
*   max-width: calc(var(–container-width) / 2);

#

以上是CSS變數 var()的用法是什麼？ CSS變數 var()的用法詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！