# WXSS
我们先来看一下官方给予的概念
WXSS (WeiXin Style Sheets)是一套样式语言,用于描述WXML的组件样式。 WXSS 用来决定 WXML 的组件应该怎么显示。
7.架构篇-WXSS编译原理及动态适配设计6 修改标题 设置为试读 本章节已完成删除这两句话听起来就是那么的耳熟,这不就是html与css之间的关系嘛,这样的描述非常合情合理。
为了适应广大的前端开发者,WXSS 具有 CSS的大部分特性。同时为了更适合开发微信小程序,WXSS 对 CSS 进行了扩充以及修改。通俗的可以理解成基于CSS改了点东西,又加了点东西。
这里我们就先与CSS进行一个比对,看看保留了哪些大部分特性。
# 写法
- 支持内联样式概念。
- 支持全局样式概念,定义在
app.wxss中的样式为全局样式,作用于每一个页面。在pages目录下的*.wxss文件中定义的样式为局部样式,只作用在对应的页面,并会覆盖app.wxss中相同的选择器。这些点与css高度相似。 - 不支持嵌套写法。
# 语法
常用样式类型与css保持一致。

盒子模型

函数及其他

基本语法方便也与css高度相似,并且上述所有标签都支持微信小程序特有的尺寸单位rpx。比如下图:

# 选择器
目前支持的选择器有:
.class样例 :.intro选择所有拥有class="intro"的组件#id样例 :#firstname选择拥有id="firstname"的组件element样例 :view选择所有view组件element, element样例 :view, checkbox选择所有文档的view 组件和所有的 checkbox 组件::after样例 :view::after在view组件后边插入内容::before样例 :view::before在view组件前边插入内容
官方给予的是上面这些,但善于发现的人察觉到了一些,:nth-child系列,:first-child, :end-child等等都是支持的,可能后续小程序版本迭代更新了,文档并没有更新。
看到如上那些,是不是WXSS给予你了一些熟悉的感觉,非常熟悉。
# 拓展
与 CSS 相比,WXSS 扩展的特性有:尺寸单位和样式导入两个方面,我们最为熟悉的就是尺寸单位rpx。
# rpx
rpx (responsive pixel)直译为:响应像素。写过小程序的都知道这个单位,可以自动适配所有大小的屏幕,而不必使用一些第三方插件进行响应式布局。
通常我们开发移动端Web的时候,总会遇到像素点适配问题,其中就存在布局问题,曾经我们为了做一些响应式的布局,引入REM,VW等,或者工程化之后使用px2remvw,这样的自动转化插件。而小程序的适配方案则为rpx。我们继续分析。

上方放置了一个小程序转换完成的px对比rpx的表格。这样明显不够直观,接下来我们将找寻源码,刨析一下rpx具体的实现原理。但是在这之前,我们需要看一下WXSS是怎么编译并且执行的。
# 编译
WXSS并不可以直接执行在webview层进行渲染,而是通过了一层编译。我们接下来就带大家编译一个WXSS看一下。
# WCSC
编译的工具名字叫WCSC,这个编译的过程是在微信开发者工具端执行的,那么这个编译工具在哪呢,我们来找一下。在微信开发者工具的控制台界面,输入help()命令可见如所示界面。

如果help()函数执行后无效果或者抛错,请检查控制台下方位置是否为top选项卡。
可以看到这里有一些命令。我们继续在控制台执行第八条openVendor()命令。

这时候弹出了一个名为WeappVendor的文件夹。在我截图的这个顺序里,可以看到最后一个文件名称正是我们要寻找的WCSC。文件种类是可执行文件。WXSS正是用这个工具来编译的。
大家记得这个寻找WeappVendor文件夹的方法,后续还要用到好几次,当然后续我还是会一步一步带大家寻找,留一个印象即可。
我们找到了WCSC编译工具后,把这个工具复制到项目的pages/index目录下,与index.wxss同目录。像下图一样即可,项目就是最开始文章中创建的新项目。

在执行编译前,我们先看
