All Products
Search
Document Center

Style

Last Updated: Feb 05, 2021

acss (AntFinancial Style Sheet) is a set of style language that describes the component style of axml pages and determines how the components of axml should be displayed.

In order to adapt to all front-end developers, the acss has most of the features of CSS. At the same time, we also extended CSS to make it more suitable for developing MINI programs.

Compared with CSS, the extended features of acss are:

  • rpx: rpx (responsive pixel) can adapt to the width of the screen. The specified screen width is 750 rpx. On iPhone 6 screen, the width is 375 px and the number of physical pixels is 750, it means that 750 rpx = 375 px = 750 physical pixels, so 1 rpx = 0.5 px = 1 physical pixel.

    Device Convert rpx to px (screen width/750) Convert px 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 external stylesheet. @import should be followed by the relative path of the external stylesheet and end with a semicolon (;).

    Code sample:

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

    Path importing supports loading third-party modules from the node_modules directory, such as page.acss:

       
    1. @import "./button.acss"; /*Relative path*/
    2. @import "/button.acss"; /*Project absolute path*/
    3. @import "third-party/button.acss"; /*Third-party npm package path*/
  • Inline style: style and class properties are supported in the component to control the style.

    • style attribute: The static styles are all written to class. style receives dynamic styles, which are parsed at runtime. Do not write static styles into style to avoid affecting rendering speed.
           
      1. <view style="color:{{color}};" />
    • class attribute: Used to specify style rules. The attribute value is a set of class selector names (style class names) in the style rule. The style class names are without dots (.), and are separated with spaces.
           
      1. <view class="my-awesome-view" />
  • Selector : Keep consistent with CSS3.

    Important:

    • Class selectors starting with .a- or .am- are reserved for system components, do not use them.
    • The attribute selector is not supported.
  • Global styles and local styles: The styles defined in app.acss are global styles that apply to each page. The styles defined in Page’s acss file are local styles that only apply to the corresponding page and override the same selector in app.acss.

  • Page container style: The page container style (such as the page background color) can be set via the page element selector:

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