Mobile Platform as a Service:ACSS syntax reference

ACSS is based on standard CSS rules to provide a familiar experience for frontend developers. ACSS also includes extensions to better support Mini Program development.

rpx

rpx (responsive pixel) is a unit that adapts to the screen width. The total screen width is defined as 750 rpx. For example, an Apple iPhone 6 has a screen width of 375 px and contains 750 physical pixels. On this device, 750 rpx = 375 px = 750 physical pixels, which means 1 rpx = 0.5 px = 1 physical pixel.

Style import

You can use the @import statement to import an external style sheet. To do this, specify the relative path of the style sheet after @import and end the statement with a semicolon (;).

Example code:

/** button.acss **/
.sm-button {
  padding: 5px;
}

/** app.acss **/
@import "./button.acss";
.md-button {
  padding: 15px;
}

You can use import paths to load third-party modules from the node_modules folder. For example:

@import "./button.acss"; /* Relative path */
@import "/button.acss"; /* Absolute path of the project */
@import "third-party/page.acss"; /* Path of a third-party npm package */

Inline style

You can use the style and class properties of a component to control its style.

style property

The style property accepts dynamic styles, which are parsed at runtime.

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

class property

The class property accepts static styles. The value of this property is a collection of class selector names from the style rules. Omit the leading period (.) from the class names. If you specify multiple class names, separate them with spaces.

<view class="my-awesome-view" />

You should define static styles in the class property. Do not specify static styles in the style property, because this can slow down rendering.

Selectors

This is CSS3-compliant.

Global and local styles

• Styles in app.acss are global styles. They apply to every page.

• Styles defined in a .acss file within a page folder are local styles. They apply only to the corresponding page and overwrite identical selectors in app.acss.

Local resource reference

You must use absolute paths to reference local resources in ACSS files. Relative paths are not supported. For example:

/* Supported */
background-image: url('/images/ant.png');
/* Not supported */
background-image: url('./images/ant.png');