css_vars! 和 var! 宏

css_vars! 宏

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

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

定义 CSS 变量

use euv_macros::*;

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! 宏一样返回 CssClass 实例（非参数化返回 &'static CssClass），因此可以直接用于 class: 属性。

var! 宏

var! 宏用于引用 css_vars! 定义的 CSS 自定义属性，展开为 CSS var() 字符串。

基本用法

// 两种写法等价
var!(bg-primary)        // → "var(--bg-primary)"
var!("bg-primary")      // → "var(--bg-primary)"

在 class! 中使用

css_vars! {
    pub c_theme {
        bg-primary: "#f8f9fb";
        text-primary: "#1a1a2e";
    }
}

class! {
    pub c_container {
        background: var!(bg-primary);
        color: var!(text-primary);
    }
}

在内联样式中使用

html! {
    div {
        style: {background: var!(bg-primary); color: var!(text-primary);}
        "Themed inline style"
    }
}

提示

var! 宏在 class! 和内联样式中都可以使用。变量名支持 kebab-case 标识符（如 bg-primary）或字符串字面量（如 "bg-primary"）。

加载中...