在CSS中，定义变量的功能是通过CSS变量（也称为自定义属性）来实现的。CSS变量允许你在整个样式表中存储一个值，并在需要时重复使用它，这样可以提高代码的可维护性和可读性。

定义CSS变量的语法是使用两个连字符（--）作为前缀，后面跟着变量名和值。变量名必须是合法的CSS标识符，且对大小写敏感。

1.全局定义，变量在:root选择器

 /* 在:root选择器中定义变量，这样它们就可以在整个文档中使用 */
 :root { 
      --main-color: #3498db; /* 定义一个主颜色变量 */
      --padding: 16px; /* 定义一个内边距变量 */
 }


/* 在媒体查询中定义或覆盖变量 */
@media (max-width: 600px) {
  :root {
    --main-color: #e74c3c; /* 在小屏幕上使用不同的颜色 */
    --padding: 12px; /* 在小屏幕上使用不同的内边距 */
  }
}

注意原生的css 不支持属性的计算和拼接 

2.局部定义，变量在元素的style中

<div class="button" style="--main-color: #e74c3c;--start-color: #ff0000;--end-color: #0000ff;">
css定义的变量
</div>

3.css变量的使用

.button {
  background-color: var(--main-color); /* 同样可以使用这个颜色变量 */
  padding: var(--padding); /* 使用相同的内边距变量 */
  border: 1px solid var(--main-color); /* 边框也使用主颜色变量 */
  animation: colorChange 2s ease-in-out;
}

@keyframes colorChange {
  0% {
    background-color: var(--start-color);
  }
  100% {
    background-color: var(--end-color);
  }
}

使用的关键字var()，动画中使用可以不用定义太多动画

结束，想要更加复杂的变量和变量的计算可以使用sass样式，使用更多方法