CSS变量（也被称为自定义属性）是CSS3新增的一项功能，允许开发者定义自己的变量，用于存储一些重复使用的样式值。CSS变量使用两个短横线（--）作为前缀，可以在任何CSS选择器中使用。

下面是使用CSS变量的基本步骤：

一、定义变量

:root{
    --variable-name:value
}

:root 表示文档的根元素，也就是HTML页面中的 元素。可以在根元素中定义变量，使其在整个文档中可用。--variable-name 是自定义的变量名称，value 是该变量的值。

例如，定义一个主题颜色变量：

:root{
    --main-color:#056de8
}

二、使用变量

可以在CSS样式中使用定义的变量，如下所示：

html

<button>提交</button>

css

button{
    background-color: var(--main-color);
    color: white;
    padding: 10px;
}

这里使用 var() 函数来引用之前定义的 --main-color 变量。可以在任何CSS样式中使用自定义的变量。

三、修改变量值

CSS变量的值可以在CSS中动态更改，如下所示：

/* 定义参数 */
:root{
    --main-color:#056de8
}
/* 使用参数 */
button{
    background-color: var(--main-color);
    color: white;
    padding: 10px;
}
/* 修改参数 */
button:hover{
    --main-color:red;
}

在这个例子中，当鼠标悬停在按钮上时，会动态更改 --main-color 变量的值为 red，从而更改按钮的背景色。

CSS变量的使用可以提高代码的可维护性和灵活性，使得在多个元素中使用相同的样式值变得更加容易。