WXSS

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

and is used to determine how WXML components are displayed.

WXSS has most of the features of CSS to cater for the needs of front-end developers, but incorporates some new features and modifications to adapt to the development of WeChat Mini Programs.

Compared with CSS, WXSS offers the following additional features:

  • Dimension unit
  • Style import

Dimension Unit

  • rpx (responsive pixel): Adaptable to the screen width. The specified screen width is 750 rpx. If the screen width on iPhone6 is 375 px (750 physical pixels), then 750 rpx = 375 px = 750 physical pixels, i.e. 1 rpx = 0.5 px = 1 physical pixel.
Device rpx-to-px conversion (screen width/750) px-to-rpx conversion (750/screen width)
iPhone5 1rpx = 0.42px 1px = 2.34rpx
iPhone6 1rpx = 0.5px 1px = 2rpx
iPhone6 Plus 1rpx = 0.552px 1px = 1.81rpx

Tip: Designers can use iPhone6 as a standard in Visual Design when developing WeChat Mini Programs.

Note: It is inevitable to have some glitches on small screens. Please try to avoid this during development.

Style Import

You can use the @import statement to import external style sheet. The @import statement should be followed by the relative path of the external style sheet and ends with ;.

Sample code:

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

Inline Style

You can use "style" and "class" properties for framework components to control the component style.

  • style: Static styles are all written to "class". "style" receives dynamic styles and parses them at runtime. It is not recommended to write static styles to "style" to avoid affecting the rendering speed.
<view style="color:{{color}};" />
  • class: Used to specify style rules. Its value is a collection of class selector names (style class names) in the style rules. The style class names do not contain . and are separated with spaces.
<view class="normal_view" />

Selectors

The following selectors are supported:

Selector Example Description
.class .intro Selects all components with class="intro"
#id #firstname Selects the component with id="firstname"
element view Selects all "view" components
element, element view, checkbox Selects all "checkbox" components and the "view" components of all documents
::after view::after Inserts content after the "view" component
::before view::before Inserts content before the "view" component

Global and Local Styles

A global style is defined in app.wxss and applies to every page, while a local one is defined in the page's wxss file and only applies to the current page (overrides the same selector in app.wxss).