css中变量

1. 定义变量
在 CSS 中，使用–前缀来定义变量。变量的命名可以由字母、数字、破折号和下划线组成，但必须以字母开头。变量的定义通常放在选择器的规则集内，或者在根元素（:root）中定义，以便全局使用。例如：

:root {
  --primary-color: #ff0000;
  --font-size: 16px;
}

2. 使用变量
使用变量时，需要使用 var() 函数将变量包裹起来。变量可以在任何可以使用 CSS 属性值的地方使用，例如颜色、尺寸、边距等。例如：

.element {
  color: var(--primary-color);
  font-size: var(--font-size);
}

我们可以把css变量当做css的一个属性值，也可以在标签中使用，例如在style中。

//.wxml
<view class="operate_style" style="--color:red">测试颜色</view>// 这里看做是css的一个属性
//.scss中

.operate_style {
  --color: #056DFF;
  background-color: #fff;
  height: 136rpx;
  width: 136rpx;
  position: absolute;
  color: var(--color);// 因为行内样式的优先级高一些，所以这里读出来的是行内样式的属性值red
}

最终效果如下，显示为红色：