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:
/** button.acss **/
.sm-button {
padding:5px;
}
/** app.acss **/
@import "./button.acss";
.md-button {
padding:15px;
}
Path importing supports loading third-party modules from the
node_modules
directory, such aspage.acss
:@import "./button.acss"; /*Relative path*/
@import "/button.acss"; /*Project absolute path*/
@import "third-party/button.acss"; /*Third-party npm package path*/
Inline style:
style
andclass
properties are supported in the component to control the style.style
attribute: The static styles are all written toclass
.style
receives dynamic styles, which are parsed at runtime. Do not write static styles intostyle
to avoid affecting rendering speed.<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.<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.
- Class selectors starting with
Global styles and local styles: The styles defined in
app.acss
are global styles that apply to each page. The styles defined in Page’sacss
file are local styles that only apply to the corresponding page and override the same selector inapp.acss
.Page container style: The page container style (such as the page background color) can be set via the page element selector:
page {
background-color: red;
}