All Products
Search
Document Center

ACSS syntax reference

Last Updated: Mar 24, 2021

ACSS is a set of style language used to describe the component style of AXML and determine the display effect of AXML components.

For the convenience of all developers, ACSS is completely consistent with the CSS rules, and is 100% available. At the same time, CSS has been expanded for developing Mini programs.

rpx

rpx (responsive pixel) can be adaptive based on the screen width, and the screen width is 750rpx. Take Apple iPhone 6 as an example, the screen width is 375px, and there are 750 physical pixels, then 750rpx = 375px = 750 physical pixels, and 1rpx = 0.5px = 1 physical pixel.

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

Import style

Use @import statement to import external style table. The relative path of the external style table is added after @import, and ; indicates the end.

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. }

It is supported to load third-party module from node_modules directory, such as page.acss:

 
  1. @import "./button.acss"; /*Relative path*/
  2. @import "/button.acss"; /*Project absolute path*/
  3. @import "third-party/page.acss"; /*Third-party npm package path*/

Inline style

Component supports style and class attribute for style control.

style attribute

Used to receive dynamic style, which is parsed in runtime.

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

class attribute

Used to receive static style. Attribute value is the cluster of class selector names (style class names) in style rules. . doesn’t need to be added to the style class name. Multiple class attributes are separated with spaces.

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

Static styles are written into class. Do not write static styles in style to avoid affecting rendering speed.

Selector

Consistent with CSS3.

Note:
  • Class selectors start with .a- and .am- are occupied by system components, not usable.
  • Attribute selectors not supported.

Global style and partial style

  • The styles in app.acss are global style, which acts on every page.
  • The styles defined in .acss file under page folders are partial style, which acts on part of the pages and overrides the same selector in app.acss.

Reference local resources

For local resource references in ACSS files, use absolute paths. Relative path references are not supported. For example:

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