原生CSS设置网站主题色—CSS变量赋值

定义CSS变量

在css文件顶部定义css变量，注意必须以--开头，使用:root包括这几个变量

:root {
  --main-bg-color: #ff7675;
  --color1: #fbfee9;
  --color2: #5a4446;
  --color3: #8baca1;
  --color4: #ffeec4;
}

使用

在需要的地方使用，使用var()包裹css变量

#secondsLong {
  position: fixed;
  color: var(--color1);
  width: 100%;
  height: 40px;
  font-size: 1.2em;
  bottom: 0;
  background-color: var(--main-bg-color);
}

转载于:https://www.cnblogs.com/YooHoeh/p/10088519.html