为了适应广大的前端开发者，WXSS具有CSS大部分特性。同时为了更适合开发微信小程序，WXSS对CSS进行了扩充以及修改。与CSS相比，WXSS扩展的特性有：尺寸单位和样式导入。在微信小程序开发中使用样式有什么要注意的地方呢？
相关的信息微信公众平台上的说明，WXSS(WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式。WXSS 用来决定 WXML 的组件应该怎么显示。
既然文档说了WXSS具有CSS 大部分特性，那么有什么不同那？
1、没有父子关系
在使用css的时候，我们经常让样式的层级关系和html接点的层级关系保持一致
我们习惯于css的写法如下
.box .content strong {}
这样写的好处是strong的样式不会去影响其他地方的strong。 但是 在小程序中并不支持这种父子的层级关系。你只能一个一个的设置，看下面的小程序代码
针对于上面的视图，对应的wxss应该如何写那？看下面代码
// 正确的
.box {}
.box-txt {}
// 错误的
.box .box-txt {}
2、样式导入
小程序的wxss支持样式的导入，这个功能相当有用，尤其是我们使用一些其他库的时候可以直接导入第三方的wxss文件，何其乐哉。
用法也很简单，看看下面代码。
@import common.wxss;
.middle-p {
padding:15px;
}
3、没有body
是的，在小程序的每一个page里是没有body属性的，不过你可以通过在wxss中对page的设置来影响整个页面的样式，比如下面的代码
page {
background:#F8F8F8
}
诸如此类，当然你也可以设置page的xxx.json中的backgroundColor属性来影响一个page页面下拉时出现的空白区域的颜色，一般来说当你页面有下拉刷新和上拉加载功能时，往往要设置backgroundColor属性。
4、尺寸的变化
在css中我们有很多衡量尺寸的单位，比如px、em等等，当然这些在小程序中也依然可以使用，但是小程序又为自己增加了一个单位，那就是 rpx 。
小程序作为移动端的应用需要适配不同规格的设备并且兼容越来越大的手机（ 话说我依然喜欢iphone5的尺寸，单手可控而且床上看电影不会砸到头 ）。
所以rpx最重要的特性就是可以根据屏幕宽度进行自适应。它规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。
5、内联样式
和css一样，wxss支持class和style两种样式，但是在用法上还是有区别的，一句话概括：“如果你的样式中存在动态内容，将其写到style中，其他的都放到class文件，
将过多的样式写到style中带来的问题就是小程序在渲染视图的时候还要伴随着解析对应的样式布局等，必然对性能有一些影响。
6、全局样式与局部样式
原则上一个在小程序中一个wxss负责一个wxml视图文件，但是对于一个应用来说总会有一些公用的属性，因此小程序为应用自身提供了一个wxss，那就是app.wxss，当然你无需人工引入，它会自动的加载到每一个视图上，这点要记住。
7、选择器
另外对于css中的选择器，wxss基本都支持了，比如类、ID、组件等，
而且类似于last-child等css的高级属性，在wxss你也可以愉快的使用。
总结
关于wxss到底对css支持了哪些，微信官方并没有给出相应的文档，更多细节我们要慢慢挖掘，毕竟腾讯不是百度，会把文档写的那么好。
推荐阅读：微信小程序组件开发教程 微信小程序开发教程
参与讨论
发表评论