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);
相关推荐
我这一生如履薄冰~21 小时前
uni-app 项目配置代理踩坑
uni-app
毕设源码-朱学姐1 天前
【开题答辩全过程】以 基于uniapp的疫苗预约系统为例,包含答辩的问题和答案
uni-app
CHB2 天前
uni-app,你的最佳vibe coding搭子
uni-app·vibecoding
怀君2 天前
Uniapp——Android离线打包自定义基座教程
android·uni-app
李慕婉学姐2 天前
【开题答辩过程】以《基于uni-app框架的助学管理系统的设计与实现》为例,不知道这个选题怎么做的,不知道这个选题怎么开题答辩的可以进来看看
微信小程序·uni-app
爱吃的强哥2 天前
uni-app 开发微信小程序注意点
微信小程序·小程序·uni-app
2501_915918413 天前
TCP 抓包分析在复杂网络问题中的作用,从连接和数据流层面理解系统异常行为
网络·网络协议·tcp/ip·ios·小程序·uni-app·iphone
じòぴé南冸じょうげん3 天前
APP本地调试正常,但是打包后出现账号密码解析错误,且前端未使用加密解密
小程序·uni-app·web app
快起来搬砖了3 天前
UniApp 路由配置实战:从全局守卫到 404 页面优雅处理
uni-app
5335ld3 天前
uniapp-APP端table列表左侧第一列固定、头部固定
windows·uni-app