ACSS Reference

The acss is used to describe the page style. It is a set of style language, used to describe the axml component style and decide the displaying mode of axml component.

To facilitate most front-end developers, our acss has the most features of css. Meanwhile, we extend the css so that it is more suitable for Mini Program.

In contrast to css, our extension features include:

Rpx

The rpx(Responsive Pixel) can adapt with screen width specification 750rpx. Take the iPhone6 as an example. The screen width is 375px and has total 750 physical pixels, 750rpx = 375px = 750 physical pixels, 1rpx = 0.5px = 1 physical pixel.

Style Import

Use the @import statement to import external style sheets. The @import  should be followed with the relative path of external style sheet, with “;” indicating the end.
Sample codes:

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

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

The import path supports node_modules directory loading third-party module, such as page.acss:

@import "./button.acss"; /*relative path*/
@import "/button.acss"; /*project absolute path*/
@import "third-party/page.acss"; /*third-party npm package path*/

Inline Style

The component supports the use of style, class attribute to control style.

Style Attribute

Used to receive dynamic style, style will be parsed in running. The !important priority rule is not supported.

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

Class Attribute

Used to receive static style. The attribute value is the set of class selector name (style class name) in the style rules. The style class name does not need the ".", and uses space to separate each other.

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

Static style is uniformly written into class. Do not write static style into style, otherwise the render speed will be affected.

Selector

Same as css3.

Note:

• The class selectors starting with .a- and .am- are occupied by the system component. Do not use them.

• Attribute selector is not supported.

Global Style and Local Style

The style defined in the app.acss is global style and acts on every page.

The style defined in the acss file of the page is local style and acts on only the corresponding page. It overwrites the same selector in app.acss.

Page Container Style

The page element selector is used to set the page container style, such as the page background color:

page {
 background-color: red;
}

Local Reference

Please use absolute path to refer local file in ACSS, relative path is not supported.

/* Supported */
background-image: url('/images/mini-program.png');
/* Not supported */
background-image: url('./images/mini-program.png');

FAQ

Q: How to solve the style pollution when an axml includes multiple custom component or template?

A: Please use namespace to separate them up.

Q: The 100% height is invalid, why?

A: Add absolute position to solve it, or it will adjust the height according to the content height in the page.