上一篇记录了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);