uniapp:css变量使用方法

上一篇记录了scss变量的使用方法,这一篇记录css变量的使用方法。

变量使用

创建css文件,比如common.css,在这里里定义变量,变量名称以--开头,把变量都放在:root下面。

css 复制代码
:root {

--primary-color:#ff5500;

}

在App.vue里引入css文件,这个方法也适用于vue项目,不同项目类型引入css文件方式不同,这个按自己的项目类型来写就可以了。

css 复制代码
@import "~@/common.css";

变量使用方法如下:

如scss稍微麻烦一点,需要戴上var()

css 复制代码
color:var(--primary-color);

变量计算

css 复制代码
font-size: calc(var(--title-font-size) + 20rpx);
相关推荐
脾气有点小暴1 天前
uniapp滚动容器冲突
uni-app
鱼樱前端1 天前
uni-app开发app之前提须知(IOS/安卓)
前端·uni-app
二狗mao2 天前
Uniapp使用websocket进行ai回答的流式输出
websocket·网络协议·uni-app
良逍Ai出海2 天前
Build in Public|为什么我开始做一款相册清理 App(听说有竞品年收益40W)
ios·uni-app·ai编程·coding
2501_915106324 天前
iOS App 测试工具全景分析,构建从开发调试到线上监控的多阶段工具链体系
android·测试工具·ios·小程序·uni-app·iphone·webview
dchen774 天前
uniapp实现上拉刷新和下拉刷新的两种方式
uni-app
FinelyYang4 天前
uniapp+unipush2.0+WebRTC实现h5一对一视频通话
uni-app·音视频·webrtc
天蓝色的鱼鱼4 天前
mescroll老用户亲测z-paging:这些功能让我果断切换!
前端·uni-app
anyup4 天前
🔥100+ 天,已全面支持鸿蒙!uView Pro 近期更新盘点及未来计划
前端·uni-app·harmonyos
半兽先生5 天前
uniapp高性能ui框架uni-ui
ui·uni-app