小程序wxss;css中使用变量

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了小程序wxss;css中使用变量相关的知识,希望对你有一定的参考价值。

参考技术A

我们在写样式的时候,可能一个app内的颜色,比如#00ff00,假设这个颜色我用了100次,穿插写在不同的页面里。当需要修改这个主题的时候,会让人抓狂。
所以我们可以使用变量来优化。

html, css里面,它原始的定义方式及使用方法是这样的

其中,:root是根元素选择器,也就是<html>元素。在这里面定义的变量,可以在整个页面进行使用。
使用的时候,用var()函数进行调用。
注意:约定变量名须以两个连字符\'--\'开头

在小程序中,用法基本也是一样的:
我们在wxss页面中进行定义

注意,page选择器是选中整个页面,前面是没有\'.\'号的。这是wxss系统自带的选择器。可以看到,用法和css原始用法差别不大。

你也可以在wxml里面直接使用!

这个wxss变量,既可以在每个页面mypage.wxss里面的page里声明,
,就能在所有页面里使用。

以上是关于小程序wxss;css中使用变量的主要内容,如果未能解决你的问题,请参考以下文章

WXSS:微信小程序版CSS

rpx是微信小程序WXSS的尺寸单位

微信小程序的初始配置

微信小程序的初始配置

微信小程序-WXSS

小程序中实时将less编译成wxss