css_vars!

eastspire2026/5/16大约 1 分钟euvuirustwasmmacroscss-vars

css_vars! 宏

css_vars! 宏用于定义 CSS 自定义属性（CSS Variables），生成 Css 函数。调用时自动将自定义属性注入 DOM。

变量名自动添加 -- 前缀，支持 kebab-case 标识符或字符串字面量。

定义 CSS 变量

use euv::*;

css_vars! {
    pub c_theme_light {
        bg-primary: "#f8f9fb";
        text-primary: "#1a1a2e";
        border-color: "#e2e8f0";
    }
    pub c_theme_dark {
        bg-primary: "#1a1a2e";
        text-primary: "#f1f5f9";
        border-color: "#334155";
    }
}

可见性修饰

与 class! 宏一致：

		说明
`pub`	公开
`pub(crate)`	crate 内可见
无修饰	私有

参数化 CSS 变量

css_vars! 支持定义带参数的 CSS 变量块，值可以动态计算：

css_vars! {
    pub c_theme_dynamic(bg: &str, text: &str) {
        bg-primary: {bg};
        text-primary: {text};
    }
}

使用：

html! {
    div {
        class: c_theme_dynamic("#f8f9fb", "#1a1a2e")
        "Dynamic themed content"
    }
}

提示

参数化 CSS 变量块的样式值使用花括号 {param} 包裹动态表达式，静态值使用字符串字面量。框架根据参数值生成唯一类名，避免样式冲突。

在 HTML 宏中使用

html! {
    div {
        class: c_theme_light()
        "Themed content"
    }
}

提示

css_vars! 宏生成的函数与 class! 宏一样返回 Css 实例（非参数化返回 &'static Css），因此可以直接用于 class: 属性。