了解CSS/CSS3原生变量var (转)
一、變量是個好東西
在任何語言中，變量的有一點作用都是一樣的，那就是可以降低維護成本，附帶還有更高性能，文件更高壓縮率的好處。
隨著CSS預編譯工具Sass/Less/Stylus的關注和逐漸流行，CSS工作組迅速跟進CSS變量的規范制定，并且，很多瀏覽器已經跟進，目前，在部分項目中已經可以直接使用了。
?
?
Chrome/Firefox/Safari瀏覽器都是綠油油的，兼容性大大超出我的預期，于是果斷嘗鮮記錄下語法用法和特性。
二、CSS變量var()語法和用法和特性
CSS中原生的變量定義語法是：--*，變量使用語法是：var(--*)，其中*表示我們的變量名稱。關于命名這個東西，各種語言都有些顯示，例如CSS選擇器不能是數字開頭，JS中的變量是不能直接數值的，但是，在CSS變量中，這些限制通通沒有，例如：
:root {--1: #369;
}
body {background-color: var(--1);
}
結果背景色如下：
?
但是，不能包含$，[，^，(，%等字符，普通字符局限在只要是“數字[0-9]”“字母[a-zA-Z]”“下劃線_”和“短橫線-”這些組合，但是可以是中文，日文或者韓文，例如：
body {--深藍: #369;background-color: var(--深藍);
}
所以，我們就可以直接使用中文名稱作為變量，即使英語4級沒過的小伙伴也不會有壓力了，我們也不需要隨時掛個翻譯器在身邊了。
無論是變量的定義和使用只能在聲明塊{}里面，例如，下面這樣是無效的：
?
--深藍: #369;
body {background-color: var(--深藍);
}
CSS屬性名可以走變量嗎？
類似下面這樣：
body {--bc: background-color; var(--bc): #369;
}
答案是“不可以”，要是可以支持的話，那CSS的壓縮可就要逆天了，估計所有的屬性都會變成1~2個字符。
CSS變量支持同時多個聲明嗎？
類似下面這樣：
…
不好意思，類似不了，語法上就根本不支持。
CSS變量使用完整語法
CSS變量使用的完整語法為：var(?[,?]? )，用中文表示就是：var( <自定義屬性名> [, <默認值 ]? )，
意思就是，如果我們使用的變量沒有定義（注意，僅限于沒有定義），則使用后面的值作為元素的屬性值。舉個例子：
.box {--1: #369;
}
body {background-color: var(--1, #cd0000);
}
則此時的背景色是#cd0000：
?
CSS變量的空格尾隨特性
請看下面這個例子：
body {--size: 20; font-size: var(--size)px;
}
請問，此時<body>的font-size大小是多少？
如果你以為是20px就太天真了，實際上，此處font-size:var(--size)px等同于font-size:20 px，注意，20后面有個空格，所以，這里的font-size使用的是<body>元素默認的大小。因此，就不要妄圖取消就使用一個數值來貫穿全場，還是使用穩妥的做法：
body {--size: 20px; font-size: var(--size);
}
或者使用CSS3?calc()計算：
body {--size: 20; font-size: calc(var(--size) * 1px);
}
轉載于:https://www.cnblogs.com/caonima-666/p/6756277.html
總結
以上是生活随笔為你收集整理的了解CSS/CSS3原生变量var (转)的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： SpringMVC的form：form表
- 下一篇： 宝珠最高几级