小程序wxss和css的区别

html-css022

小程序wxss和css的区别,第1张

WXSS (WeiXin Style Sheets)是一套样式语言,用于描述 WXML 的组件样式。WXSS 用来决定 WXML 的组件应该怎么显示。为了适应广大的前端开发者,WXSS 具有 CSS 大部分特性。同时为了更适合开发微信小程序,WXSS 对 CSS 进行了扩充以及修改。与 CSS 相比,WXSS 扩展的特性有:(1)尺寸单位(2)样式导入尺寸单位rpx(responsive pixel): 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素。样式导入使用@import语句可以导入外联样式表,@import后跟需要导入的外联样式表的相对路径,用表示语句结束。

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

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

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

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

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

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

小程序中,用法基本也是一样的:

我们在wxss页面中进行定义

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

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

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

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

如果想让该样式库作为公共样式的话,可以在app.wxss文件中写入

@import "样式库路径"

如果只是作为某个页面的样式,可以在该页面的.wxss文件中写入

@import "样式库路径"