Mobile Platform as a Service:Style

acss (AntFinancial Style Sheet) is a style language that describes how components on an axml page are displayed.

acss includes most CSS features to support frontend developers. It also extends CSS to better suit Mini Program development.

acss extends CSS with the following features:

• rpx: A responsive pixel (rpx) is a unit that adapts to the screen width. The screen width is defined as 750 rpx. For example, on an iPhone 6, the screen width is 375 px and contains 750 physical pixels. In this case, 750 rpx = 375 px = 750 physical pixels, and 1 rpx = 0.5 px = 1 physical pixel.

  Device	rpx to px conversion (screen width/750)	px to rpx conversion (750/screen width)
  iPhone 5	1 rpx = 0.42 px	1 px = 2.34 rpx
  iPhone 6	1 rpx = 0.5 px	1 px = 2 rpx
  iPhone 6 Plus	1 rpx = 0.552 px	1 px = 1.81 rpx

• Style import: Use the @import statement to import an external style sheet. The statement is followed by the relative path of the external style sheet and ends with a semicolon (;).

  Example:

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

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

  The import path supports loading third-party modules from the node_modules folder. For example, in page.acss:

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

• Inline style: Components support the style and class properties to control styles.

  • The style property is for dynamic styles that are parsed at runtime. Static styles should be written in a class instead. Avoid using style for static styles because it can slow down rendering.

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

  • The class property specifies style rules. Its value is a list of class selector names separated by spaces. Do not include a dot (.) before the class names.

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

• Selectors: Selectors are consistent with those in CSS3.

  Note

  Class selectors that start with .a- or .am- are reserved for system components and should not be used. Attribute selectors are not supported.

• Global and local styles: Styles defined in app.acss are global styles that apply to every page. Styles defined in a page's acss file are local styles. Local styles apply only to their corresponding page and overwrite any identical selectors in app.acss.

• Page container styles: You can use the page element selector to set the style for the page container. For example, to set the page background color:

  page {
  background-color: red;
  }