[Mini Program] Using WXSS to write style introduction and the difference from CSS

WXSS writing style

WXSS (WeiXin Style Sheets) is a style language used to describe the WXML component style, WXSS is used to determine how the WXML components should be displayed .

There is not much difference between WXSS and CSS, in order to adapt to the majority of front-end developers, WXSS has most of the features of CSS. At the same time, in order to be more suitable for the development of WeChat applet, WXSS has expanded and modified CSS.

The official documentation says: Compared with CSS, the features of WXSS extensions are :

Dimension Units
Style Import

---

Small program style writing

Three ways to write page styles :

Inline style, page style (valid for the current page), global style (valid for all pages)

All three styles can be applied to the components of the page

• Inline style: effective for the current component

<!-- 只针对当前组件生效 -->
<text style="color: red">哈哈哈哈</text>

• Page style: written in the separate wxss file of the page, it only takes effect on the current page

.active {
    
    
	color: skyblue;
	font-size: 20px;
	font-weight: 700;
}

<!-- 只能在当前页面中使用 -->
<text class="active">哈哈哈哈</text>

• Global styles: styles declared in the app.wxss file will take effect in any page

.title {
    
    
	color: red;
	font-size: 20px;
}

<!-- 在任何页面中都可以使用 -->
<text class="title">哈哈哈哈</text>

If there is the same style :

The order of priority is: inline style > page style > global style

---

Selectors supported by WXSS

The officially supported selectors are as follows ( in fact, some other selectors are also supported, but the ones that are officially recommended are the following )

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 all document view components and all checkbox components
::after	view::after	Insert content after the view component
::before	view::before	Insert content before the view component

WXSS selector priority is similar to CSS, and the weight is as shown in the figure

WXSS extension - dimension unit

The size unit is also the biggest difference from our CSS

measurement unit

rpx (responsive pixel): It can be adaptive according to the screen width , and the screen width is specified as 750rpx.

For example, on iPhone6, the screen width is 375px and there are 750 physical pixels in total, then 750rpx = 375px = 750物理像素, 1 rpx = 0.5px = 1物理像素.

Suggestion: Designers can use iPhone 6 as the standard for visual drafts when developing WeChat mini-programs, and generally use the iPhone 6-bit standard .

That is to say, we use rpx unit, in the case of iPhone 6-bit design draft, when we want to set the size of 100px, set 200rpx instead ( value of px unit * 2 = value of rpx )

The element after setting the rpx unit will adapt to the size of the screen

---

WXSS style import

Use the @importstatement to import the external style sheet, @importfollowed by the relative path of the external style sheet to be imported, and use to ; indicate the end of the statement .

• For example define some css files in test.wxss file

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

• Import the test.wxss file in app.wxss, you can use the style in the test.wxss file

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