css中变量

_处女座程序员的日常

于 2024-08-30 21:39:41 发布

阅读量711

点赞数 6

分类专栏： css 前端微信小程序文章标签： css 前端

本文链接：https://blog.csdn.net/qq_42931285/article/details/141727872

版权

前端同时被 3 个专栏收录

372 篇文章 13 订阅

订阅专栏

css

113 篇文章 0 订阅

订阅专栏

微信小程序

16 篇文章 0 订阅

订阅专栏

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
}