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

时间:2022-04-26 15:27:22

定义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);
}