var! 宏

基本用法

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

use euv_macros::*;

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

提示

变量名支持 kebab-case 标识符（如 bg-primary）或字符串字面量（如 "bg-primary"）。kebab-case 标识符会自动转换为 --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"
    }
}

配合 css_vars! 实现主题切换

var! 宏与 css_vars! 配合，通过切换 CSS 变量类实现主题切换：

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 c_container {
        background: var!(bg-primary);
        color: var!(text-primary);
        border: var!(border-color);
        border_width: "1px";
        border_style: "solid";
    }
}

// 切换主题：将 c_theme_light() 替换为 c_theme_dark() 即可
html! {
    div {
        class: c_theme_light()
        class: c_container()
        "Themed content"
    }
}

提示

var! 宏在 class! 和内联样式中都可以使用。它仅生成 CSS var(--variable-name) 字符串，实际变量值由 css_vars! 生成的 CssClass 在注入 DOM 时定义。

加载中...