轻松掌握CSS自定义属性，开启CSS开发新篇章

2023-10-19 13:07:01

CSS自定义属性，也称为CSS变量，是CSS3中的一项强大特性，它允许您存储和修改CSS属性的值，就像在编程语言中使用变量一样。与传统的CSS属性不同，CSS自定义属性可以被多次重复使用，并且可以在不同的选择器中进行修改。这使得CSS代码更加灵活、可维护和可重用。

要定义一个CSS自定义属性，您需要使用--前缀，后面紧跟属性名称和值。例如，要定义一个名为--primary-color的CSS自定义属性，并将它的值设置为蓝色，您可以使用以下代码：

:root {
  --primary-color: blue;
}

一旦定义了一个CSS自定义属性，您就可以在整个样式表中使用它。例如，您可以使用它来设置文本颜色、背景颜色、边框颜色等。

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

body {
  background-color: var(--primary-color);
}

.button {
  border-color: var(--primary-color);
}

CSS自定义属性的另一个强大功能是它可以被修改。这使得您可以根据不同的条件来改变样式表的配色方案或布局。例如，您可以使用JavaScript来修改CSS自定义属性的值，从而实现动态的样式变化。

const root = document.documentElement;

function setTheme(theme) {
  if (theme === 'light') {
    root.style.setProperty('--primary-color', 'white');
    root.style.setProperty('--secondary-color', 'black');
  } else if (theme === 'dark') {
    root.style.setProperty('--primary-color', 'black');
    root.style.setProperty('--secondary-color', 'white');
  }
}