Css 变量

之前从来没有这样用过，感觉也是很惊奇啊，像less“变量”一样；

.Variables{
　　--color:red;
　　background: var(--color);
　　width: 100px;
　　height: 50px;
}
<div class=‘Variables‘></div>

.button-gradient {
　　background: linear-gradient(var(--gradientAngle), var(--gradientStart),var(--gradientStop));

　　--gradientAngle: 60deg;
　　--gradientStart: lightpink;
　　--gradientStop: lightyellow;
　　height: 50px;
　　width: 200px;
　　line-height: 50px;
　　font-weight: 700;
　　font-size: 20px;
　　text-align: center;
}

.button-gradient:hover {
　　--gradientAngle: 0deg;
}

<div class=‘button-gradient‘>Gradient Button</div>

// Variables
:root {
　　--primaryColor: lightgreen;
　　--buttonBgColor: var(--primaryColor);
}

.button {
　　background: var(--buttonBgColor);
}

.button--blue {
　　--buttonBgColor: lightblue;
}
.btn{
　　height: 50px;
　　width:100px;
　　margin: 10px;
}

<div class=‘button btn‘></div>
<div class=‘button--blue btn‘></div>

如果我想更新加载器栏的宽度来表示加载时间的百分比，我可以这样做：

function calculateLoadProgress() {
  let loadProgress = 0;

  // codes to update loadProgress here

  return loadProgress;
}

// Set width of progress bar
document.documentElement.style.setProperty(‘--progressBarWidth‘, calculateLoadProgress());