感謝https://javascript30.com/的免費教程

Demo：http://codepen.io/FutureFronterAndy/pen/xRavKj

學習點：

:root{
 --spacing: 10px;
 --blur: 10px;
 --base: #ffc600;
 }
 img{
 padding: var(--spacing);
 background: var(--base);
 filter: blur(var(--blur));
 }
 .hl{
 color: var(--base);
 }

:root：裡頭為CSS選擇器的虛擬類別，CSS中制訂變數的概念
參考：https://www.w3.org/wiki/CSS/Selectors/pseudo-classes/:root

var(--base)：CSS中使用變數的方式

const inputs=document.querySelectorAll(".controls input");
 inputs.forEach(input=>input.addEventListener("change",handleUpdate));
 // inputs.forEach(input=>input.addEventListener("mouseover",handleUpdate));
 function handleUpdate(){
 
 const suffix=this.dataset.sizing||'';
 console.log(this.value);
 document.documentElement.style.setProperty(`--${this.name}`,this.value+suffix);

script的流程為抓取所有類別為controls裡的input(共會抓到三個)，再透過監聽其input 改變時做handleUpdate。

<input type="range" name="spacing" min="10" max="200" value="10" data-sizing="px">

this.dataset.sizing：為抓取data-sizing="px"，可以將data-改接別的字,ex:data-cool, data-scaling...隨意

document.documentElement.style.setProperty(--${this.name}`,this.value+suffix);

設定property, 因為要有彈性--${this.name}包含scale,base和spacing，而this.value則為數值