小程序wxss;css中使用变量_软件运维

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

所以我们可以使用变量来优化。

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

其中，:root是根元素选择器，也就是<html>元素。在这里面定义的变量，可以在整个页面进行使用。

使用的时候，用var()函数进行调用。

注意：约定变量名须以两个连字符'--'开头

在小程序中，用法基本也是一样的：

我们在wxss页面中进行定义

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

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

这个wxss变量，既可以在每个页面mypage.wxss里面的page里声明，

，就能在所有页面里使用。

rpx是微信小程序WXSS的尺寸单位。介绍rpx前，先要介绍WXSS。

WXSS(WeiXin Style Sheets) 是一套样式语言，用于描述 WXML 的组件样式。

WXSS 用来决定小程序页面WXML的组件应该怎么显示。

为了适应广大的前端开发者，微信小程序的 WXSS 具有 CSS 大部分特性。同时为了更适合开发小程序，微信开发者对 CSS 进行了扩充以及修改。

与 CSS 相比WXSS扩展的特性有：

其中，rpx就是尺寸单位。

建议：开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准。

注意：在较小的屏幕上不可避免的会有一些毛刺，请在开发时尽量避免这种情况。

参考资料：微信小程序开发文档

欢迎分享，转载请注明来源：内存溢出

小程序wxss;css中使用变量