知識分享！CSS中的函數(shù)和變量
CSS函數(shù)
與Javascript一樣，CSS中也有一些計(jì)算函數(shù)，僅對與一些常用的和個(gè)人了解的做一次分享。
CSS函數(shù)較多，從常用性和實(shí)際出發(fā)，按運(yùn)用比重順序排序
Color 顏色相關(guān)
rgb()、rgba()
這兩個(gè)函數(shù)一定是不會陌生的，對于顏色屬性值通過紅綠藍(lán)三原色來進(jìn)行調(diào)整。
區(qū)別在于 rgba() 中 a 表示透明度，取值0-1之間。相對來說最為常用
除此之外，類似的CSS顏色函數(shù)還有：
hsl()、hsla()
使用色相、飽和度、亮度、(透明度)來定義顏色
hwb()
使用色相、以及黑白混合度（white\black）如上方右圖所示。
相對的，可能對于美術(shù)或設(shè)計(jì)師更能理解以色相為主的顏色選取方式，其實(shí)對于代碼來說，我們使用rgb()和rgba()即可，兼容性也是良好的。
color-mod()
CSS Color Module Level 4 中提出一個(gè)新的CSS
其是基于一個(gè)顏色值，在不同的條件下調(diào)整參數(shù)得到的新顏色，未作深入了解?？梢酝ㄟ^colorme.io/這個(gè)網(wǎng)站來看下具體顏色值是如何變化的，同時(shí)大漠老師的博客中也有相關(guān)的文檔解釋，可以參考下。
使用color-mod()函數(shù)修改顏色
Transform 變換相關(guān)
對于不同內(nèi)核瀏覽器，可能需要加入私有前綴來進(jìn)行對應(yīng)的兼容性處理，而3d邊換，IE毒瘤則是一定不支持的
translate 位置變換：translate()、translateX()、translateY()、translate3d()
rotate 旋轉(zhuǎn)變換：rotate()、rotate3d()、rotateX()、rotateY()、rotateZ()
skew 傾斜變換：skew()、skewX()、skewY()
scale 縮放變換：scale()、scale3d()、scaleX()、scaleY()、scaleZ()
Background 背景相關(guān)
linear-gradient() 線性漸變
代碼實(shí)現(xiàn)如下：
radial-gradient() 徑向漸變
代碼實(shí)現(xiàn)如下：
conic-gradient() 角向漸變
代碼實(shí)現(xiàn)如下：
element() 將網(wǎng)站中的某部分當(dāng)作圖片渲染
CSS Color Module Level 4 中提出一個(gè)新的CSS，由于只能在Firefox 瀏覽器內(nèi)產(chǎn)生效果，可以參考大漠老師的另一篇文章，里面有更為詳細(xì)的介紹
CSS element()函數(shù)
Math 計(jì)算相關(guān)
相對來說，計(jì)算相關(guān)的函數(shù)其實(shí)兼容性一般，對于個(gè)人項(xiàng)目或移動端項(xiàng)目可以做嘗試
min() 取最小值
對于dialog這一類元素，其長度應(yīng)當(dāng)適應(yīng)于不同分辨率下，以往可能需要使用 vw / % 等來渲染，但是會有一個(gè)問題，那就是在不同分辨率下可能 60vw / 60% 下，dialog的寬度在1920分辨率下看著還算正常，但是在1366等比較小的分辨率下會出現(xiàn)寬度不足以容納內(nèi)部元素，或者做適配時(shí)不太優(yōu)雅展示的時(shí)候，可以考慮結(jié)合這一類計(jì)算函數(shù)來進(jìn)行。
max() 取最大值
同min() 取值邏輯
clamp() 取值范圍
clamp(MIN, VAL, MAX) = max(MIN, min(VAL, MAX))
其中MIN表示最小值，VAL表示首選值，MAX表示最大值。意思是，如果VAL在MIN和MAX范圍之間，則使用VAL作為函數(shù)返回值；如果VAL大于MAX，則使用MAX作為返回值；如果VAL小于MIN，則使用MIN作為返回值。
calc() 動態(tài)計(jì)算
calc() 應(yīng)該是最為常見的css計(jì)算函數(shù)了，可結(jié)合 四則運(yùn)算來取部分的寬高等，可用于圣杯布局中主體內(nèi)容的寬高計(jì)算等需要?jiǎng)討B(tài)計(jì)算的地方
Attr() 屬性函數(shù)
僅從官方的例子中只能看到些基礎(chǔ)的應(yīng)用，且容易理解，而張鑫旭老師博客中指出：
傳統(tǒng)的attr()語法只能讓HTML屬性作為字符串使用，且只能使用在偽元素中
全新的attr()語法那可就完全不得了了，可以讓HTML屬性值轉(zhuǎn)換成任意的CSS數(shù)據(jù)類型。
個(gè)人嘗試代碼直接報(bào)錯(cuò)了~??，
還是建議想要了解的查看下原文章：
www.zhangxinxu.com/wordpress/2…
CSS 變量
**var()函數(shù)可以代替元素中任何屬性中的值的任何部分。var()**函數(shù)不能作為屬性名、選擇器或者其他除了屬性值之外的值。
CSS 變量聲明
--* 用來聲明變量，使用 var(--*) 來使用變量
CSS變量聲明只可用于屬性值，不可用以屬性名
CSS變量不支持多個(gè)同時(shí)聲明
CSS變量使用的合法性
CSS變量與屬性單位結(jié)合需要使用 * 乘法
CSS變量的聲明時(shí)可相互調(diào)用聲明的變量
:root { --main-bg-color: pink; --ml: 20px; --mlv: 20; --primary-size: 20px; --base-font-size: var(--primary-size); /* 變量聲明時(shí)的調(diào)用 / } body { background-color: var(--main-bg-color); / 表現(xiàn)結(jié)果為：背景色為粉紅 / } .ml20 { margin-left: var(--ml); margin-left: calc(var(--mlv) * 1px); / 表現(xiàn)結(jié)果都是左間距20px,此處的變量運(yùn)用需區(qū)別帶單位和不帶單位的使用差異 */ }
CSS 變量作用域
上述代碼中，顯示出了CSS變量也是具有作用域的
: root 取全局作用域，div 取所有的div元素，#alert 取所有id為alert的元素使用，按照css解析順序，上面案例代碼的元素顏色即和文字表述一致
JS讀取CSS變量
CSS 變量在日漸完善，瀏覽器對于其支持性也在慢慢變多，而區(qū)別于Sass/Less 等預(yù)處理器來說，原生變量不需要去進(jìn)行編譯等操作，但是相對的，CSS變量的語法還有待提高和優(yōu)化，不過我們可以提前做嘗試和運(yùn)用~
內(nèi)容些許淺顯，僅是個(gè)人對于部分CSS相關(guān)的知識的歸納總結(jié)，不當(dāng)之處，感謝指正！
了解更多，請點(diǎn)擊：https://www.bilibili.com/video/BV1JK411G7ZS/
作者：JasonSubMara
鏈接：https://juejin.cn/post/6908962052727898125
來源：掘金
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處。
