定义样式类
maomi 支持一种受限的 CSS 写法。
多数情况下，样式需要通过 class 来指定。
stylesheet! {
class my_class {
color = red;
}
}
#[component(Backend = DomBackend)]
struct MyWebsite {
template: template! {
<div class:my_class> "My Website" </div>
}
}
类似于普通的 rust struct ， class 可以是公开的、可以被多个组件使用。
stylesheet! {
pub(crate) class my_class {
color = red;
}
}
class 名与其他 rust struct 和 enum 位于同一个命名空间中。
不要让节点名与 class 名相同，否则就无法使用。
stylesheet! {
// 错误：不要用 div 作为 class 名
class div {
color = red;
}
}
样式属性语法
样式表语法与标准 CSS 有差异。
样式属性语法形如 xxx = xxx; 且 CSS 标识符需要改用 _ 来连接。
stylesheet! {
class my_class {
// 使用 = 代替 : ，且 ; 不可省略
color = red;
// 使用 _ 代替 -
background_color = rgb(192, 192, 192);
}
}
带有单位的数据必须这样写：
stylesheet! {
class my_class {
// 生成 font-size: 1.5em;
font_size = Em(1.5);
// 生成 padding: 1px 0.1rem;
padding = Px(1) Rem(0.1);
}
}
#xxx 这样的颜色值必须这样写：
stylesheet! {
class my_class {
// 生成 background-color: #00d2ff;
background_color = Color("00d2ff");
}
}
调试生成的 CSS
如果不清楚生成的 CSS 究竟是什么样的，在 class 前添加一个 #[error_css_output] 可以将生成的 CSS 作为编译错误输出出来。
stylesheet! {
#[error_css_output]
class my_class {
background_color = Color("00d2ff");
}
}
哈希后的 class 名
class 名最终会被哈希。所以完全可以在不同模块中使用相同的 class 名。
stylesheet! {
class my_class {
color = red;
}
}
mod another_mod {
stylesheet! {
class my_class {
color = yellow;
}
}
}
也可以手工指定哈希后的名字。
stylesheet! {
#[css_name("my-class-1")]
class my_class {
color = red;
}
}
生成的 CSS 输出
maomi 会为每个 crate 生成一个 CSS 输出文件。
在 Cargo.toml 中指定 CSS 输出目录路径，才能得到这个 CSS 输出文件。
[package.metadata.maomi]
css-out-dir = "pkg"
css-out-mode = "release"
如果 css-out-mode 被设为 debug ，生成的 CSS 会更易读。
CSS 输出目录应通过 css-out-dir 指定。生成的文件名是 [CRATE_名].css 。在 HTML head 中使用它：
<link rel="stylesheet" href="pkg/my_website.css">
这两个选项可以分别被 MAOMI_CSS_OUT_DIR 和 MAOMI_CSS_OUT_MODE 环境变量覆盖。
