【CSS】我如何解釋CSS變量的好
博客說(shuō)明
文章所涉及的資料來(lái)自互聯(lián)網(wǎng)整理和個(gè)人總結(jié)晶默，意在于個(gè)人學(xué)習(xí)和經(jīng)驗(yàn)匯總矛洞，如有什么地方侵權(quán)微姊，請(qǐng)聯(lián)系本人刪除酸茴，謝謝！
說(shuō)明
其實(shí)多說(shuō)變量有多好兢交，干我們這行的都知道薪捍。就說(shuō)JS，沒(méi)了變量配喳，那代碼就亂了套酪穿。那可讀性和代碼的篇幅，都讓程序員成為一次性工晴裹，沒(méi)法復(fù)用被济。
所以CSS的變量的作用非常之大（原諒沒(méi)啥墨水的程序員），雖說(shuō)CSS邏輯沒(méi)有那么復(fù)雜涧团，但對(duì)于代碼的可讀性有著大大的增強(qiáng)只磷。CSS作為樣式官，那么良好的代碼風(fēng)格泌绣，不正是符合它的風(fēng)格嗎钮追。
CSS 變量可以訪問(wèn) DOM，這意味著您可以創(chuàng)建具有局部或全局范圍的變量赞别，使用 JavaScript 來(lái)修改變量畏陕，以及基于媒體查詢來(lái)修改變量。
對(duì)于一些字體或者顏色來(lái)說(shuō)仿滔，用變量是最好的選擇惠毁。
var()函數(shù)
var() 函數(shù)用于插入 CSS 變量的值犹芹。
語(yǔ)法
var(name, value)
| 值 | 描述 |
|---|---|
| name | 必需。變量名（以兩條破折號(hào)開(kāi)頭）鞠绰。 |
| value | 可選腰埂。回退值（在未找到變量時(shí)使用）蜈膨。 |
全局使用
全局使用的話在 :root 選擇器中聲明屿笼。
:root 選擇器匹配文檔的根元素。
:root {
--blue: #1e90ff;
}
body { background-color: var(--blue); }
局部使用
局部使用就是有局部作用域的變量翁巍，只需要在使用它的選擇器中聲明驴一。
element {
--main-bg-color: brown;
background-color: var(--main-bg-color);
}
變量的類型
字符串
如果變量值是一個(gè)字符串，可以與其他字符串進(jìn)行拼串
--main:"hello";
--text: var(--main)"world ! ";
數(shù)值
如果變量的值為數(shù)值灶壶，則在使用的時(shí)候不可以與數(shù)值單位直接連用
.text {
--main: 30;
/* 無(wú)效 */
margin-top: var(--main)px;
}
需要使用的時(shí)候需要通過(guò)calc()函數(shù)
.text {
--main: 30;
margin-top: calc(var(--main) * 1px);
}
如果在賦值的時(shí)候帶著單位的話肝断，直接寫，不需要使用字符串形式驰凛，否則無(wú)效胸懈。
響應(yīng)式布局
CSS 是動(dòng)態(tài)的，頁(yè)面的任何變化恰响，都會(huì)導(dǎo)致采用的規(guī)則變化趣钱。
在響應(yīng)式布局的 media命令里面聲明變量，可以讓不同屏幕有著不同的變量值
body {
--primary: #DE783F;
--success: #E7ED2F;
}
@media screen and (min-width: 768px) {
body {
--primary: #F7EF29;
--success: #FF753F;
}
}
@media screen and (min-width: 1440px) {
body {
--primary: #F745F2;
--success: #E7F53F;
}
}
span {
color: var(--primary);
text-decoration-color: var(--success);
}
瀏覽器支持
表格中的數(shù)字注明了完全支持該屬性的首個(gè)瀏覽器版本胚宦。
總結(jié)
- CSS可以減輕工作的復(fù)雜性首有，更方便修改和添加，改一處就能應(yīng)用到其他地方间唉。
- 變量本身是包含語(yǔ)義的信息绞灼，使代碼更易于閱讀（更容易理解）。main-theme-color比單純出現(xiàn)在文檔中的#e3ff34要更加容易理解呈野，也方便改動(dòng)低矮。在不同的文件中出現(xiàn)相同的顏色也好定義說(shuō)明。
感謝
萬(wàn)能的網(wǎng)絡(luò)
以及勤勞的自己被冒，個(gè)人博客军掂，GitHub測(cè)試，GitHub
公眾號(hào)-歸子莫昨悼，小程序-小歸博客
