CSS Variables，一個並非那麼新的東西，但對css來講絕對是一場革命。以前使用變量的時候，須要藉助sass、less等預處理工具來實現，如今咱們能夠直接使用css來聲明變量。javascript
1、兼容性css
先來看下兼容性html
2、語法java
語法有點難看但很簡單，--*來聲明變量名，var(--*)來使用，也許你要問了，爲何使用--不用$一類的呢，唉，那不是sass、less兩個貨用了嗎瀏覽器
一、聲明和使用必須放在{}代碼塊裏sass
body{ --bg-color: lightblue; background-color: var(--bg-color); }
二、全局變量與變量覆蓋less
在:root代碼塊裏面聲明的變量就是全局變量，而且局部變量會覆蓋全局變量工具
:root{ --bg-color: red; } body{ --bg-color: lightblue; background-color: var(--bg-color); }
最後生效的是--bg-color: lightblue，bg-color變量的值也就變成了lightblue佈局
.block { color: #8cacea; --color: blue; }
局部做用域：`--color`做用域是`.block`選擇器學習
三、變量的缺省值
完整的變量使用語法 var( [, ]? )，當變量沒有定義的時候，會使用後面的值。看下面的例子
body{ --1: red; color:var(--2, blue); }
上面代碼會在body的做用域裏面查找--2變量，沒有的話就會查找全局，都沒有的話就會使用後面的值，因此最後生效的顏色就是blue
能夠看到，上面咱們的變量名直接使用了數字😂，css變量很叼的，不僅是數字，漢字都是能夠的。
四、參與計算
:root{ --bg-color: lightblue; --文字顏色: white; --fong-size: 30; } body{ background-color: var(--bg-color); } div{ color: var(--文字顏色); font-size: var(--fong-size)px; }
此時div裏面的文字的大小是多少呢？是瀏覽器默認的大小，爲何不是我們想象的30px呢，這是由於變量轉換的時候末尾會帶上空格，var(--fong-size)px會轉換成30 px。咱們能夠老老實實聲明變量的時候帶上單位：--fong-size: 30px;
或者使用calc()計算屬性：font-size: calc(var(--fong-size) * 1px);
五、js獲取與賦值
咱們能夠使用js來獲取和賦值css變量
:root{ --bg-color: lightblue; } // 獲取 getComputedStyle(document.documentElement).getPropertyValue('--bg-color') // lightblue // 賦值 document.documentElement.style.setProperty('--bg-color', 'yellowgreen')
3、簡單應用
下面咱們利用css變量作一個這樣簡單的聚光燈效果，圓圈跟隨鼠標移動
寫代碼以前咱們來梳理下思路，怎麼來實現這個效果，主要有如下幾步
一、聲明全局css變量
二、設置body爲純黑背景，添加div並設置背景圖
三、將div的背景圖使用clip-path進行裁剪，使用變量設置圓心位置
四、添加鼠標事件，動態更改css變量也就是圓心位置
佈局很簡單，就是一個div，咱們主要說下css樣式
:root{ --x: 40; --y: 40; } *{ padding: 0; margin: 0; } body{ width: 100vw; height: 100vh; background: #000; } div{ width: 100%; height: 100%; background: url('../images/bg.png') 0 0 no-repeat; clip-path: circle(100px at calc(var(--x) * 1px ) calc(var(--y) * 1px)); background-size: cover; }
使用*通配符簡單粗暴幹掉瀏覽器默認樣式，body設置100%，這裏使用了vw和vh單位，表示將視口的等分紅100份，100vw就是100份寬就是100%的寬，vh同理。
重點來了，使用css聲明瞭--x、--y兩個變量，而後在div樣式裏裁剪時使用clip-path: circle(100px at calc(var(--x) * 1px ) calc(var(--y) * 1px))，咱們使用clip-path裁剪了一個圓，它的語法以下：clip-path: circle(半徑 at 圓心X軸座標 圓心Y軸座標 )
--x和 --y的值
document.addEventListener('mouseover', function(e){ document.documentElement.style.setProperty('--x', e.clientX) document.documentElement.style.setProperty('--y', e.clientY) })
此時，咱們使用css變量完成了一個簡單的效果，是否是簡單多了。css變量還有更多的使用場景，好比換膚，切換大小等等，請盡情的發揮吧。
下面這篇文章講的比較細，能夠參考學習：你應該掌握的CSS自定義屬性技術點：https://www.w3cplus.com/css/everything-you-need-to-know-about-css-variables.html