如何通过CSS3原生变量轻松实现网站主题换肤功能？

本文共计445个文字，预计阅读时间需要2分钟。

变量的声明明确表明变量何时以及如何变化，变量名前应加双横线（--）作为标识。

变量的声明声明变量的时候，变量名前面要加两根连词线（--）。body{--color:red;--background-color:#545454;}:root{*:root伪类选

变量的声明

声明变量的时候，变量名前面要加两根连词线（--）。

body { --color:red; --background-color:#545454;}:root { /* :root伪类选择器表示文档根元素 */ --backgroundColor: #f0f0f0; --color: #232323;}

CSS 变量（CSS variable）又叫做“CSS 自定义属性"（CSS custom properties)，变量名大小写敏感，--header-color和--Header-Color是两个不同变量。

变量的使用

var()函数用于读取变量。

color: var(--color,#545454); // 第二个只为默认值

注意，变量值只能用作属性值，不能用作属性名。

变量值的类型

如果变量值是一个字符串，可以与其他字符串拼接。

--bar: 'hello';--foo: var(--bar)' world';

如果变量值是数值，不能与数值单位直接连用。

.foo { --gap: 20; /* 无效 */ margin-top: var(--gap)px;}

上面代码中，数值与单位直接写在一起，这是无效的。必须使用calc()函数，将它们连接。

.foo { --gap: 20; margin-top: calc(var(--gap) * 1px);}

如果变量值带有单位，就不能写成字符串。

/* 无效 */.foo { --foo: '20px'; font-size: var(--foo);}/* 有效 */.foo { --foo: 20px; font-size: var(--foo);}

代码实现主题换肤

页面

headerchange theme

样式

事件

通过js来动态设置css变量