WXSS

WXSS (WeiXin Style Sheets) is a set of style languages that describe the component styles of WXML.

WXSS is used to determine how WXML components should be displayed.

To accommodate a wide range of front-end developers, WXSS has most of the features of CSS. At the same time, in order to be more suitable for developing WeChat Mini Programs, WXSS has extended and modified CSS.

Compared to CSS, the features extended by WXSS are:

  • Unit of Measurement
  • Style Import

Unit of Measurement

  • rpx (responsive pixel): Can be adapted to the width of the screen. The specified screen width is 750rpx. On the iPhone 6, the screen width is 375px with a total of 750 physical pixels, then 750rpx = 375px = 750 physical pixels, and 1rpx = 0.5px = 1 physical pixel.
Device rpx converted into px (screen width/750) px converted into 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

Recommendation: The designers can use iPhone 6 as a standard for visual drafts when developing WeChat Mini Programs.

Note: There are some inevitable burrs on the smaller screen. Please try to avoid this situation during development.

Style Import

Use the @import statement to import the out-of-line stylesheet, @import followed by the relative path of the out-of-line stylesheet that needs to be imported, and use ; to end the statement.

Sample code:

/** common.wxss **/
.small-p {
  padding:5px;
}
/** app.wxss **/
@import "common.wxss";
.middle-p {
  padding:15px;
}

Inline Style

The style and class attributes are supported on the framework component to control the style of the component.

  • style: The static styles are all written to the class. The style can receive dynamic styles and parse them at runtime. Try to avoid writing static styles into style so as not to affect rendering speed.
<view style="color:{{color}};" />
  • class: Used to specify a style rule in which attribute value is a collection of class selector names (style class names) in the style rule. The style class name does not need to add ., and should be separated by spaces.
<view class="normal_view" />

Selector

The 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 the view component of all documents and all checkbox components
::after view::after Insert content after the view component
::before view::before Insert content in front of the view component

Global styles and local styles

The styles defined in app.wxss are global styles that apply to each page. The styles defined in the page's wxss file are local styles that only apply to the corresponding page and will override the same selector in app.wxss.