[分享]css3原生变量实例

CSS3原生变量是CSS3中引入的一个新特性，它允许在CSS中定义和使用变量，这方便了CSS的维护和重用。下面我们来看一个实例。:root{ primarycolor: 0066cc; seconda...

CSS3原生变量是CSS3中引入的一个新特性，它允许在CSS中定义和使用变量，这方便了CSS的维护和重用。下面我们来看一个实例。

:root{
  --primary-color: #0066cc;
  --secondary-color: #ff6600;
  --font-size: 14px;
}

h1{
  color: var(--primary-color);
  font-size: var(--font-size);
}

p{
  color: var(--secondary-color);
  font-size: var(--font-size);
} 

我们在:root伪类中定义了三个变量：--primary-color表示主色调，--secondary-color表示次色调，--font-size表示字体大小。然后在h1和p标签的样式中，分别使用了这三个变量。这样，如果需要修改主色调或者字体大小，只需要修改:root中的变量值，就可以自动应用到所有使用了这些变量的地方，大大减轻了维护的负担。

需要注意的是，变量名必须以两个连字符（--）开头，变量值可以是任意CSS值，但要使用var()函数来引用变量。如果变量名不存在，var()函数将使用后备值（fallback value），也就是var(--xxxx, fallback-value)的方式。