在微信小程序開發(fā)中，需要用到一種微信自己推出的一套樣式語言——WXSS（WeiXin Style Sheets），它用于描述WXML的組件樣式，也就是說用來決定WXML的組件應(yīng)該怎么顯示。那么今天小程序觀察網(wǎng)小編就和各位開發(fā)者一起聊聊微信小程序WXSS樣式語言。

開發(fā)者開發(fā)微信小程序，需要對(duì)小程序的界面進(jìn)行排版，此時(shí)就要用到WXML和WXSS了。WXML指定了界面的框架結(jié)構(gòu)，而WXSS起到的作用就是指定界面的框架及元素的顯示樣式。

按照微信官方的介紹，WXSS具有CSS的大部分特性，并且在CSS的基礎(chǔ)上進(jìn)行了擴(kuò)充和修改，以適合廣大的前端開發(fā)者開發(fā)微信小程序。CSS的特性和使用方法想必開發(fā)朋友都清楚，這里就不介紹了。既然官方說WXSS具有CSS的大部分特性，那就說明還是有部分是不同的，小編就來整理一下哪些地方不同。

差別一：沒有body

小程序的每一個(gè)page里都沒有body屬性，要想影響整個(gè)頁面的樣式可以通過在WXSS中對(duì)page進(jìn)行設(shè)置來實(shí)現(xiàn)。

差別二：尺寸變化

在CSS里衡量尺寸的單位有很多，比如px、em等，而WXSS里除了這些外，還新增了一個(gè)單位：rpx。它最重要的特性是可以根據(jù)屏幕寬度進(jìn)行自適應(yīng)，畢竟小程序作為在移動(dòng)端展現(xiàn)需要適配各種規(guī)格的移動(dòng)設(shè)備。官方介紹，規(guī)定屏幕寬為750rpx，如在 iPhone6 上，屏幕寬度為375px，共有750個(gè)物理像素，則750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

差別三：樣式導(dǎo)入

小程序WXSS支持樣式的導(dǎo)入，比如我們使用一些其他庫的時(shí)候就可以直接導(dǎo)入第三方的WXSS文件，這是一個(gè)相當(dāng)有用的功能。

差別四：內(nèi)聯(lián)樣式

WXSS和CSS一樣支持class和style兩種樣式，但用法上有一些區(qū)別。按照官方的說法概括為：樣式中存在動(dòng)態(tài)內(nèi)容，就寫道style中，其他的都放到class文件。

差別五：選擇器

如官方介紹，WXSS基本支持CSS中的選擇，而且類似于last-child之類的css的高級(jí)屬性，也可以在WXSS中使用。

差別六：全局樣式與局部樣式

在小程序中，一般一個(gè)WXSS負(fù)責(zé)一個(gè)WXML視圖文件，但一個(gè)應(yīng)用難免會(huì)有一些共用的屬性，所以小程序?yàn)閼?yīng)用自身提供了一個(gè)WXSS—app.wxss，它不用人工引入，會(huì)自動(dòng)的加載到每一個(gè)視圖上。

總之，小程序樣式語言WXSS具有了CSS大部分屬性，而且還拓展了尺寸單位和樣式導(dǎo)入等特性，更適合開發(fā)微信小程序。對(duì)于熟悉CSS的開發(fā)者來說WXSS上手并沒有太大難度，當(dāng)然更多的細(xì)節(jié)差別還有待開發(fā)朋友們多挖掘探索。