ACSS is a set of style language used to describe the component style of AXML and determine the display effect of AXML components.
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:
/** button.acss **/
.sm-button {
padding: 5px;
}
/** app.acss **/
@import "./button.acss";
.md-button {
padding: 15px;
}
It is supported to load third-party module from node_modules
directory, 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
Component supports style
and class
attribute for style control.
style attribute
Used to receive dynamic style, which is parsed in runtime.
<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.
<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:
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 inapp.acss
.
Local resource references
For local resource references in ACSS files, use absolute paths. Relative path references are not supported. For example:
/* Supported */
background-image: url('/images/ant.png');
/* Not supported */
background-image: url('./images/ant.png');