CSS 3 中新增了变量的支持，可以方便地在样式中重复利用。这一特性非常实用，可以让样式变得更加灵活和易于维护。在使用变量时，需要使用--前缀来定义变量名称，用var()来调用变量。
定义变量：

:root {
--primary-color: #007bff;
--font-size: 16px;
}

在样式中使用变量：

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

在多个样式中共用一个变量也是非常容易的，只需要在 :root 中定义该变量即可。在某些情况下，我们需要在样式中动态地改变变量的值。这时只需要在 JavaScript 中修改变量的值，这些样式便会自动地应用新的值。代码示例如下：

document.documentElement.style.setProperty('--primary-color', '#dc3545');

总之，变量是 CSS 中的一项强大特性，能够让样式更加清晰、可维护和灵活。我们可以将一些共用的值提取出来，存放在变量中，方便修改和复用。 在实际开发中，尝试使用变量会让你感受到它的便利和强大。