maomi
Introduction
Guide
Documents

Style Classes

Define style classes

Maomi supports a limited form of CSS.

In most cases, styles should be specified through classes.

stylesheet! {
class my_class {
color = red;
}
}
#[component(Backend = DomBackend)]
struct MyWebsite {
template: template! {
<div class:my_class> "My Website" </div>
}
}

Like common rust structs, classes can be public and used by multiple components.

stylesheet! {
pub(crate) class my_class {
color = red;
}
}

The class name is in the same namespace of the rust structs and enums.

Do not use element tag name as class names, otherwise the element tag name cannot be used.

stylesheet! {
// error: do not use "div" as class name
class div {
color = red;
}
}

Property syntax

The stylesheet syntax is different from standard CSS.

The basic property syntax is "xxx = xxx;", and the CSS words should be connected with "_".

stylesheet! {
class my_class {
// use "=" instead of ":", and ";" is always required
color = red;
// use "_" instead of "-"
background_color = rgb(192, 192, 192);
}
}

Numbers with units should be written as follows:

stylesheet! {
class my_class {
// this generates "font-size: 1.5em;"
font_size = Em(1.5);
// this generates "padding: 1px 0.1rem;"
padding = Px(1) Rem(0.1);
}
}

Colors in "#xxx" forms should be written as follows:

stylesheet! {
class my_class {
// this generates "background-color: #00d2ff;"
background_color = Color("00d2ff");
}
}

Debug the CSS output

When not sure about the CSS output, add a "#[error_css_output]" before the class and the generated CSS will output as an error message.

stylesheet! {
#[error_css_output]
class my_class {
background_color = Color("00d2ff");
}
}

Hashed class names

The class names are properly hashed. It is totally OK to use the same class name in different modules.

stylesheet! {
class my_class {
color = red;
}
}
mod another_mod {
stylesheet! {
class my_class {
color = yellow;
}
}
}

It is OK to specified the hashed name.

stylesheet! {
#[css_name("my-class-1")]
class my_class {
color = red;
}
}

Generated CSS output

Maomi will generate a static CSS file for each crate.

To get the output CSS file, specify the output path in Cargo.toml.

[package.metadata.maomi]
css-out-dir = "pkg"
css-out-mode = "release"

If "css-out-mode" is configured to "debug", the generated CSS will be easier to read.

The CSS output is in the specified "css-out-dir". Generated file name is "[CRATE_NAME].css". Use it in HTML head:

<link rel="stylesheet" href="pkg/my_website.css">

This two options can be override by environment variables "MAOMI_CSS_OUT_DIR" and "MAOMI_CSS_OUT_MODE".

< Events
Conditional Styles >
Basics
Write a Component
Template Semantics
Template Nodes
Template Branches
Template Repeats
Template Updates
Events
Stylesheets
Style Classes
Conditional Styles
Style Constants
Style Functions
Global Stylesheets
Components
Using Components
Component Events
Properties
Advanced Features
Server Side Rendering
I18n Support
Performance Tips
Runtime Performance Tips
Compilation Performance Tips