WXSS (WeiXin Style Sheets) is a style language used to describe the component styles of WXML.
WXSS is used to determine how WXML components should be displayed.
In order to adapt to the majority of front-end developers, WXSS has most of the features of CSS. At the same time, in order to be more suitable for the development of WeChat applet, WXSS has expanded and modified CSS.
Compared to CSS, the features of WXSS extensions are:
- measurement unit
- style import
measurement unit
- rpx (responsive pixel): can be adaptive according to the screen width. The specified screen width is 750rpx. For example, on iPhone6, the screen width is 375px and there are 750 physical pixels, so 750rpx = 375px = 750 physical pixels, 1rpx = 0.5px = 1 physical pixel.
| equipment | rpx to px (screen width/750) | px to rpx (750/screen width) |
|---|---|---|
| iPhone5 | 1rpx = 0.42px | 1px = 2.34rpx |
| iPhone6 | 1rpx = 0.5px | 1px = 2rpx |
| iPhone6 Plus | 1rpx = 0.552px | 1px = 1.81rpx |
Suggestion: Designers can use iPhone6 as the standard for mockups when developing WeChat mini-programs.
Note: There will inevitably be some glitches on smaller screens, please try to avoid this when developing.
style import
Use a @importstatement to import an external style sheet, @importfollowed by the relative path of the external style sheet that needs to be imported, and ;end with a statement statement.
Sample code:
/** common.wxss **/ .small-p { padding:5px; }
/** app.wxss **/ @import "common.wxss"; .middle-p { padding:15px; }
inline style
The framework component supports the use of style and class attributes to control the style of the component.
- style: The static style is written into the class uniformly. style receives dynamic styles, which will be parsed at runtime. Please try to avoid writing static styles into style, so as not to affect the rendering speed.
<view style="color:{{color}};" />
- class: used to specify a style rule. Its attribute value is a collection of class selector names (style class names) in the style rule. The style class name does not need to be included
., and the style class names are separated by spaces.
<view class="normal_view" />
Selector
Currently supported selectors are:
| Selector | Sample | Sample description |
|---|---|---|
| .class | .intro |
Select all components with class="intro" |
| #id | #firstname |
Select the component with id="firstname" |
| element | view |
select all view components |
| element, element | view, checkbox |
Select all document view components and all checkbox components |
| ::after | view::after |
Insert content after the view component |
| ::before | view::before |
Insert content before the view component |
Global and local styles
The styles defined in app.wxss are global styles that apply to every page. The styles defined in the page's wxss file are local styles, which only apply to the corresponding page and override the same selector in app.wxss.