# WXSS

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

WXSS Used to decide WXML How the components should be displayed.

To accommodate the vast number of front-end developers, WXSS Have CSS Most of the features. At the same time, in order to be more suitable for the development of WeChat Mini programs, WXSS Yes CSS It was expanded and modified.

and CSS In comparison, WXSS Extended features are:

• Unit of size
• Style import

# Unit of size

• rpx（responsive Pixel): Can be adaptive based on screen width. Specifies a screen width of 750rpx. As in iPhone6 If the screen width is 375px, there are 750 physical pixels, then 750 rpx. = 375px = 750 physical pixels, 1 rpx = 0.5px = 1 physical pixel.

Recommendations: When developing WeChat mini programs, designers can use iPhone6 As a standard for visual manuscripts.

Note: It is inevitable that there will be some glitches on smaller screens, so try to avoid this when developing.

# Style import

use@importStatement can be imported into an outreach style sheet,@importFollowed by the relative path of the external style sheet to be imported, with the``Indicates the end of the statement.

Sample code:

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

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

# Inline style

Support for the use of style、class Property to control the style of a component.

• Style: Static styles are written uniformly class In. style Receive dynamic styles that will be parsed at runtime. Try to avoid writing static styles into style In order not to affect the rendering speed.

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

• Class: Used to specify a style rule whose property value is the name of the class selector in the style rule(Style Class Name)The style class name does not need to be taken with the., style class names are separated by spaces.

<view class="normal_view" />

# Selector

Currently supported selectors are:

# Global and local styles

Defined in the app.wxss The style in the. in Page of wxss The styles defined in the file are local styles that only apply to the corresponding page and overwrite app.wxss The same selector in.