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);
相关推荐
李宏伟~2 小时前
uniapp生成二维码组件全能组件复制即用
前端·uni-app
苹果5204 小时前
uniapp组件——异步级联面板(async-cascade-select)
uni-app
Jyywww1218 小时前
uniapp中pinia(setup语法)使用流程
开发语言·javascript·uni-app
00后程序员张8 小时前
iOS 26 系统流畅度深度剖析,Liquid Glass 视效与界面滑动的实际测评
android·macos·ios·小程序·uni-app·cocoa·iphone
凉辰9 小时前
uniapp获取设备的IP地址(已踩坑,开箱即用)
uni-app
雪山上的小灰熊11 小时前
UNIAPP如何自定义全局方法?
javascript·typescript·uni-app·vue·vue3·vite·hooks
2501_9159214311 小时前
uWSGI + HTTPS 实战指南,配置、证书、TLS 终止与调试全流程(适用于生产与真机抓包排查)
网络协议·http·ios·小程序·https·uni-app·iphone
Q_Q196328847514 小时前
python+springboot+uniapp基于微信小程序的校园二手闲置二手交易公益系统 二手交易+公益捐赠
spring boot·python·django·flask·uni-app·node.js·php
2501_9160088914 小时前
iOS 26 系统流畅度剖析:Liquid Glass 动画表现 + 用户反馈
android·macos·ios·小程序·uni-app·cocoa·iphone