在 CSS 里面可以自定义一些变量，给变量设置一个值，然后在样式里，我们可以使用变量的名字引用它的值，修改了变量的值以后，所有使用了这个变量的样式都会发生相应的变化。

在这个网页文档的样式表里面，可以在 body 这个元素里定义一个变量，这样被这个元素包装的东西都可以使用这些变量。变量的名字要用两条横线开头，然后是给变量起的名字，比如 primary-color，这个变量的值是一个颜色值，比如 blue。

下面再用一下这个变量，用 h1 这个标签的名字作为样式的选择器，一组大括号，里面可以使用 color 这个样式属性设置一下文字的颜色，这里可以用一下在 body 元素里定义的 --primary-color 变量，引用变量，要用 var 这个函数，把要使用的变量的名字交给这个函数，比如 --primary-color。

你会发现在页面上显示的这个标题的颜色现在会是蓝色，检查一下这个标题元素，显示这个元素上面用 color 设置了一下文字的颜色，颜色的值是 --primary-color 这个变量的值，这个变量是在 body 元素里面定义的，它的值是 blue 这种颜色。