Styles (acss)

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

acss supports most CSS features and extends them for Mini Program development.

acss extends CSS with the following features:

• rpx: rpx (responsive pixel) adapts to screen width, which is fixed at 750 rpx. On an iPhone 6 (375 px wide), 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 @import to import an external style sheet. Specify the relative path followed by a semicolon (;).

  Example:

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

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

  Import paths also support third-party modules from node_modules. 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 for styling.

  • Use style for dynamic styles parsed at runtime. Write static styles in class instead, because style slows rendering.

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

  • The class property accepts a space-separated list of class selector names. Omit the dot (.) prefix.

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

• Selectors: acss supports standard CSS3 selectors.

  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 in app.acss are global and apply to every page. Styles in a page-level acss file are local, apply only to that page, and override matching selectors in app.acss.

• Page container styles: Use the page selector to style the page container. Example:

  page {
  background-color: red;
  }