[分享]css3变量重新赋值

CSS3变量可以为网页的元素赋值，而且可以随时修改和重新赋值。在CSS3中，使用var关键字定义和使用变量，使用声明（name: value）定义变量，使用var(name)来调用变量值。:root ...

CSS3变量可以为网页的元素赋值，而且可以随时修改和重新赋值。在CSS3中，使用var关键字定义和使用变量，使用声明（--name: value）定义变量，使用var(--name)来调用变量值。

:root {
    --primary-color: #007bff;
}
.navbar {
    background-color: var(--primary-color);
}

@media (max-width: 768px) {
    :root {
        --primary-color: #dc3545;
    }
} 

在这个例子中，我们首先在根元素上定义了一个名为“primary-color”的变量，它的值为蓝色。然后，我们将navbar的背景颜色设置为这个变量的值。接下来，我们使用媒体查询，在小屏幕上再次定义“primary-color”变量，它的值为红色。在运行时，CSS会根据屏幕大小重新排列规则，并重新定义了颜色变量的值，导致我们navbar的背景颜色从蓝色变为红色。

使用CSS3变量有一个很大的好处，就是可以减少CSS的重复性。例如，如果你需要多次在CSS中定义一个相同的颜色，你可以将这个颜色定义为变量，并在所有需要使用这个颜色的地方使用这个变量。

:root {
    --primary-color: #007bff;
    --secondary-color: #6c757d;
}

.cta-button {
    background-color: var(--primary-color);
    color: #fff;
    border: 1px solid var(--primary-color);
}

.button-secondary {
    background-color: var(--secondary-color);
    color: #fff;
    border: 1px solid var(--secondary-color);
} 

在这个例子中，我们定义了两个变量“primary-color”和“secondary-color”，分别代表主要颜色和次要颜色。然后，我们将这些变量用于两个按钮样式的定义，避免了重复定义相同的颜色值。

总之，CSS3变量的重新赋值是非常方便和实用的。由于它们的可变性，可以通过一个变量改变许多元素的行为和样式。另外，它们还可以大大减少重复定义相同的数值，从而使代码更加简洁和易于维护。