acss (AntFinancial Style Sheet) is a set of style language used to describe the component styles of “axml” pages and decide on how the components of axml should be displayed.

    In order to meet the needs of large front-end developers, our “acss”enjoys most features of CSS. At the same time, we have expanded the CSS to facilitatemini-program development.

    Compared with CSS, acss enjoys the following extended features:

    • rpx: rpx (responsive pixel) can adaptto the width of the screen. The provided rscreen width is 750 rpx. For example, on the iPhone6, the screen width is 375 px and there are 750 physical pixels in total. And then here’s the resullts: 750 rpx = 375px = 750 physical pixels, and 1 rpx = 0.5 px = 1 physical pixel. | Device | Convert rpx to px (screen width/750) | Convertpx to rpx (750/screen width) | | —- | —- | —- | | iPhone5 | 1 rpx = 0.42 px | 1 px = 2.34 rpx | | iPhone6 | 1 rpx = 0.5 px | 1 px = 2 rpx | | iPhone6 Plus | 1 rpx = 0.552 px | 1 px = 1.81 rpx |

    Style import: Use the @import statement to import the external style sheet. After @import, you need to add the relative path of the external style sheet, and use a semicolon (;) to indicate the end.

    Code example:

    1. /** button.acss **/
    2. .sm-button {
    3. padding:5px;
    4. }
    1. /** app.acss **/
    2. @import "./button.acss";
    3. .md-button {
    4. padding:15px;
    5. }

    The import path supports loading the third-party module from the “node_modules” directory, for example, “page.acss”:

    1. @import "./button.acss"; /*相对路径*/
    2. @import "/button.acss"; /*项目绝对路径*/
    3. @import "third-party/button.acss"; /*第三方 npm 包路径*/

    Inline style: The component supports the use of “style” and “class” attributes to control styles.

    • style attribute: all static styles are written in the “class”. “style” receives dynamic styles, which will be parsed during operation. Please try to avoid writing static styles into style, so as not to affect the rendering speed.

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

    • “class” attribute: It is used to specify style rules. The attribute value is a collection of class selector names (style class names) in the style rules. The style class names do not need to have a dot (.), and the class names are separated by spaces.

      1. <view class="my-awesome-view" />
    • Selector: Keep consistent with CSS3.

      Note:

      • Class selectors starting with “.a-” and “.am-” are used by system components, please do not use them.
      • The attribute selector is not supported.。

    • Global styles and local styles: The styles defined in “app.acss” are global styles, which are applied to each page. The styles defined in Page’s acss file are local styles, which are only used on the corresponding pages and will override the same selector in “app.acss”.

    • Page container style: You can set the style of the page container through the page element selectorlike the background color of the page:

      1. page {
      2.   background - color: red;
      3. }