前端基礎之 CSS 變數#
演示一下怎麼用
先創建一個正方形
我們注意到寬高是一樣的，代碼是重複的
重複的代碼一定會帶來維護上的不便，我這個代碼比較少，所以你覺的沒啥，但是代碼多了以後，維護起來就會非常頭疼
CSS 變數怎麼寫呢 -- 變數名：值
比如：
--size: 300px;
後面調用的話
width: var(--size)
當我們想改變正方形寬高時，只需要改變 --size 的值就行
變數可以像 CSS 屬性一樣繼承，所以如果有一個變數要整個網頁用的話，可以寫到 HTML 或者裡
既然是變數，那麼我們還可以參與計算
為了看起來方便，我們再創建一個子 div
我們要讓 box 的 padding 是寬的 20%，那麼就可以這麼寫
padding:calc(var(--size) * 0.2)
讓子元素寬高是父元素的一半
父元素改成 100px
也沒有問題
用來寫全局主題
雖然主題色是相同的，但不同的地方透明度不同
改變下主題顏色的透明度，用 RGB 三個值做變數，底下用 RGBA 調整透明度，如果想預覽是什麼顏色，可以用註釋
如果多個元素動畫是一樣，但是大小不一樣，所以偏移量也不一樣，那麼就需要寫多個動畫
只需要在每個元素上設置一個 CSS 變數，然後在動畫裡調用就行了
<div class="box" style="--dotsize: 10px"></div>
<div class="box" style="--dotsize: 5px"></div>
transform:translate(calc(var(--dotsize) * 3),calc(var(--dotsize) - 3))
ok，先說到這裡，更多的用法大家自己慢慢挖掘，祝大家早日精通 CSS