8. 样式WXSS

WXSS( WeiXin Style Sheets )是⼀套样式语⾔，⽤于描述 WXML 的组件样式。 与 CSS 相⽐，WXSS 扩展的特性有：

• 响应式
• ⻓度单位 rpx 样式导⼊

8.1 尺寸单位

rpx（responsive pixel）：可以根据屏幕宽度进行自适应。规定屏幕宽度为750rpx。如在iPhone6上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素， 1rpx = 0.5px = 1物理像素。

设备	rpx换算px（屏幕宽度750）	px换算rpx（750/屏幕宽度）
iphone5	1rpx = 0.42px	1px = 2.34rpx
iphone6	1rpx = 0.5px	1px = 2rpx
iphone6 plus	1rppx = 0.552px	1px = 1.81rpx

建议：开发微信小程序时，设计师可以用iphone6作为视觉稿的标准。

使用步骤：

1. 确定设计稿宽度 pageWidth
2. 计算比例 750rpx = pageWidth px， 因此 1px = 750/pageWidth
3. 在less文件中，只要把设计稿中的px =》 750/pageWidth rpx即可

需要把页面当中某些元素的单位 由px 改为 rpx
1. 设计稿为750px
    750px = 750rpx
    1px = 1rpx
2. 把屏幕宽度改为 375px
    375px = 750px
    1px =2rpx
    1rpx = 0.5px
3. 存在一个设计稿 宽度为414 或者为 未知page
    1. 设计稿 page 存在一个元素 宽度为 100px
    2. 拿以上的需求去实现不同宽度的页面适配
    page px = 750rpx
    1px = 750rpx / page
    100px = (750rpx / page)*100
    
    假设page = 375px
4. 利用一个属性 calc 属性 ，这个属性css和wxss都支持
    1. 750 和 rpx 之间不要留空格
    2. 运算符的两边要留空格
    
width: calc(750rpx * 100 / 375);    
    

8.2 样式导入

1. 在小程序当中，不需要主动来引入样式文件，只需要保持文件名称相同即可

wxss中直接就支持样式导入功能。

也可以和less中的导入混用。

使用 @import 语句可以导入外联样式表，只支持相对路径。

示例代码：

在项目根路径下创建 styles/common.wxss

/** common.wxss**/
.small p {
    padding: 5px;
}

/** app.wxss**/
@import "../../styles/common.wxss";
view {
  background-color: aqua;
}

8.3 选择器

特别需要注意的是：小程序不支持统配符 * 因此以下代码无效！

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

目前支持的选择器有：

选择器	样例	样例描述
.class	.intro	选择所有拥有class="intro"的组件
#id	#username	选择拥有id = “username”的组件
element	view	选择所有的view组件
element, element	view, checkbox	选择所有文档的view组件和所有的checkbox组件
nth-child(n)	view:nth-child(n)	选择某个索引的标签
::after	view::after	在view组件后边插入内容
::before	view::before	在view组件后边插入内容

8.4 小程序中使用less

原生小程序不支持less，其他基于小程序的框架大体都支持，如：wepy、mpvue、taro等。但是仅仅因为一个less功能，而去引入一个框架，肯定是不可取的，因此，可以用一下方式来实现：

• 1. 编辑器是vscode
• 2. 安装插件：easy less

• 

• 3. 在vscode 的设置中加入如下配置：

"less.compile": {
    "outExt" : ".wxss"
}

• 4. 在要编写样式的地方，新建less文件，如 index.less ，然后正常编辑即可。ctrl+S保存后，会自动给你创建一个.wxss文件

//定义less变量
@color: yellow;
//使用变量
text {
    color: @color;
}

text {
    view {
        text {
            color: #ccc;
        }
    }
}


@import '../../styles/reset.less';

text {
    color: @themeColor;
}

 reset.less

@themeColor: green;