# 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同目录。像下图一样即可，项目就是最开始文章中创建的新项目。
在执行编译前，我们先看
