css3 var 變數定義

無意中發現 css3的擁有一個自定義屬性的功能，利用這個功能，我們可以實現灰常牛逼的功能。如圖：


css自定義變數的語法是 --*
取名規則也很廣，除了$、[、^、(、%都可以取，甚至可以取中文名。。
舉個栗子:

p {
  --牛逼顏色: #ff4400;
  color: var(--牛逼顏色);
}

咋一看，跟sass 、less變數差不多~ 但是它是css原生自帶的，很是方便。但是它是不支援設定屬性名的，例如：

    p{
        --test:font-size;
        var(--test):24px;
    }
 

oh,這樣寫是無效的。。。。

var 的預設值

還有一個就是預設值，設定的值不合法的時候，會給出一個預設值來保證正常解析 例如這樣：

 p{
    --color: 20px;
    background-color:var(--color)
 }

它會解析成 background-color:transparent;

var 空格尾隨特性

p {
  --size: 20;   
  font-size: var(--size)px;
}

這樣寫，實際上會變成這樣 font-size:20 px 自動變成一個空格。。。。好坑，千萬不要用sass或者less的變數的概念來帶節奏。。
正確的寫法是這樣

p {
  --size: 20px;   
  font-size: var(--size);
}

或者

p {
  --size: 20;   
  font-size: calc(var(--size) * 1px);
}

實際應用

讓我們用這個神奇的變數來實現一個牛逼的按鈕效果吧，直接上程式碼
html

 <button class="button">
    <span>我來試試這個！</span>
 </button>

.button {
            position: relative
 
;
            appearance: none;
            background: #f72359;
            padding: 1em 2em;
            border: none;
            color: white;
            font-size: 1.2em;
            cursor: pointer;
            outline: none;
            overflow: hidden;
            border-radius: 100px;
        }
.button span {
            position: relative;
        }

.button::before {
            --size: 0;
            content: '';
            position: absolute;
            left: var(--x);
            top: var(--y);
            width: var(--size);
            height: var(--size);
            background: radial-gradient(circle closest-side, #4405f7, transparent);
            transform: translate(-50%, -50%);
            transition: width .7s ease, height .7s ease;
        }

.button:hover::before {
            --size: 400px;
        }

document.querySelector('.button').onmousemove = (e) => {
            const x = e.pageX - e.target.offsetLeft
            const y = e.pageY - e.target.offsetTop
            e.target.style.setProperty('--x', `${ x }px`)
            e.target.style.setProperty('--y', `${ y }px`)
        }