你真的需要了解一下CSS變量 var()的用法
我要評論當Web項目變得越來越大時，他的CSS會變得像天文數(shù)字那么大而且還變得混亂。為了幫助我們解決這個問題，新的CSS變量很快就會出現(xiàn)在主流瀏覽器中，它讓開發(fā)人員能夠重用并輕松編輯重復出現(xiàn)的CSS屬性。用過SASS或Less的人應該知道他的變量功能有多棒，但這些變量是預處理器，需要在使用前進行編譯?，F(xiàn)在變量在vanilla CSS中可用，您可以立即在瀏覽器中使用它們！
定義和使用CSS變量
與任何其他CSS定義一樣，變量遵循相同的范圍和繼承規(guī)則。使用它們的最簡單方法是通過將聲明添加到:root偽類來使它們?nèi)挚捎?，以便所有其他選擇器都可以繼承它。
:root {
--awesome-blue：＃2196F3;
}
要訪問變量中的值，我們可以使用var(…)語法。請注意，名稱區(qū)分大小寫，因此–foo != –FOO。
.element {
background-color:var(--awesome-blue);
}
瀏覽器支持
常用的瀏覽器除了IE都完美支持，您可以在此處獲取更多詳細信息 –我可以使用CSS變量。下面是幾個例子，展示了CSS變量的典型用法。為確保它們正常工作，請嘗試在我們上面提到的其中一個瀏覽器上查看它們。
示例1 – 主題顏色
當我們需要對多個元素一遍又一遍地應用相同的規(guī)則時，CSS中的變量是最有用的，例如主題中的重復顏色。我們不是每次想要重復使用相同顏色時進行復制和粘貼，而是將其放在變量中并從那里訪問它。
現(xiàn)在，如果我們的客戶不喜歡我們選擇的藍色陰影，我們可以在一個地方（變量的定義）改變樣式來改變整個主題的顏色。沒有變量，我們必須手動搜索和替換每一次出現(xiàn)。
可將代碼復制下來在你的編輯器里面測試
* {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>過放蕩不羈的生活，容易得像順水推舟，但是要結(jié)識良朋益友，卻難如登天。</p> <button>確認</button> </div>
示例2 – 屬性類名可讀性
變量的另一個重要用途是當我們想要保存更復雜的屬性值時，我們不必記住它。最好的例子就是有多個參數(shù)，如CSS規(guī)則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 – 動態(tài)更改變量
當多次聲明自定義屬性時，標準規(guī)則有助于解決沖突，樣式表中最后定義的會覆蓋上面定義的。
下面的示例演示了用戶動態(tài)操作改變屬性是多么容易，同時仍然保持代碼清晰簡潔。
*{margin: 0;padding: 0;box-sizing: border-box;}
html{background: #eee;padding: 30px;font: 500 14px sans-serif;color: #333;line-height: 1.5;}
.blue-container{background: #64B5F6;padding-left: 50px;}
.green-container{background: #AED581;padding-left: 50px;}
.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">將鼠標懸停在不同的顏色區(qū)域上可以更改此文本和標題的大小。</p> </div> </div> </div>
正如您所看到的，CSS變量非常簡單易用，開發(fā)人員不必花費太多時間在各處開始應用它們。以下是擴展內(nèi)容：
var()函數(shù)有兩個參數(shù)，如果自定義屬性失敗，它可用于提供回退值：
width: var(–custom-width, 20%);
可以嵌套自定義屬性：
- –base-color: #f93ce9;
- –background-gradient: linear-gradient(to top, var(–base-color), #444);
變量可以與CSS的另一個新增功能- calc() 函數(shù)結(jié)合使用。
- –container-width: 1000px;
- max-width: calc(var(–container-width) / 2);
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
如何利用css var函數(shù)讓你的組件樣式輸出規(guī)范樣式API可定制性更高
我們平時在使用Elementui Antdesing這些UI庫時，難免會碰到使用deep強行侵入式去修改組件內(nèi)部樣式的情況，今天通過本文給大家介紹如何利用css var函數(shù)讓你的組件樣式輸出規(guī)2023-05-10
