# WXSS

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

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

To accommodate the majority of front-end developers, WXSS has most of the features of CSS.In order to be more suitable for development Weixin Mini Program, WXSS has expanded and modified CSS.

Compared to CSS, the features of WXSS extensions are:

• Unit of dimensions
• Style Import

# Unit of dimensions

• Rpx (responsive pixel): Adaptable to screen width. Specifies a screen width of 750rpx.For example, on the iPhone 6, the screen width is 375px, and there are 750 physical pixels, then 750 rpx = 375 px = 750 physical pixels, and 1 rpx = 0.5 px = 1 physical pixel.

Suggestion: When developing Weixin Mini Program, strategists can use the iPhone6 as a visual script standard.

Note: On smaller screens there will inevitably be some glitches, so try to avoid them when developing.

# Style Import

Use the@ importstatement to import the outbound style sheet, and@importto relative paths to the outbound Style Sheet that you need to import, use;indicates the end of the statement.

Example code:

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

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

# The inline style

Framework components support the use of style, class attributes to control the style of components.

• Style: Static styles are written into the class. Style receives dynamic styles, and will be parsed at runtime, please try to avoid writing static styles into the style, so as not to affect the rendering speed.

<view style="color:{{color}};" />

• Class: Used to specify a style rule whose attribute value is a collection of class selector names (style class names) in the style rule.., style class names are separated by spaces.

<view class="normal_view" />

# Selector

Currently supported selectors are:

# Global Style and Local Style

The styles defined in Apagewxss are global styles that apply to each page. A style defined in the page's wxss file is a local style that applies only to the corresponding page and overrides the same selector in apagewxss.