[分享]css中定义一个变量

CSS中定义一个变量可以用到新特性CSS变量，其支持使用已经定义好的变量作为其他变量的值，这样可以方便地更新整个页面的样式。:root { maincolor: ff6347; secondaryco...

CSS中定义一个变量可以用到新特性CSS变量，其支持使用已经定义好的变量作为其他变量的值，这样可以方便地更新整个页面的样式。

:root {
  --main-color: #ff6347;
  --secondary-color: #ffffff;
}

button {
  color: var(--main-color);
  background-color: var(--secondary-color);
} 

在上面的例子中，我们先在:root中定义了两个变量--main-color和--secondary-color。然后我们在按钮的样式中使用了这两个变量，分别作为文字颜色和背景颜色的值。

这个例子中，如果我们想要更换主要颜色，只需要改变:root中--main-color的值，整个页面的主色调就会随之更新。

除此之外，我们还可以通过var()函数来定义一个默认值，在变量缺失的情况下使用默认值。

:root {
  --main-color: #ff6347;
}

button {
  color: var(--secondary-color, #000000);
  background-color: var(--main-color);
} 

在这个例子中，我们只在:root中定义了一个变量--main-color。而在按钮的样式中，我们使用了var()函数来获取--secondary-color的值，但是同时也指定了一个默认值#000000，以防止变量缺失时无法正常显示。

总的来说，CSS变量为我们提供了更加灵活和易于维护的样式定义方式。