# 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 Weixin 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.

Tip: Designers can use iPhone6 as a standard in Visual Design when developing Weixin 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:

# 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).