Rust 风格

在组件函数中编写 SCSS

与 Dioxus 一起使用

将依赖项添加到 Cargo.toml

[dependencies]
sir = { version = "0.5.0", features = ["dioxus"] }

在您的应用程序中的某个位置渲染 AppStyle 组件

use sir::AppStyle;

fn App() -> Element {
    rsx!(
        AppStyle {}
        Counter {}
    )
}

现在，使用 css! 和 global_css! 宏来为您的应用程序设置样式！

use sir::{css, global_css};

fn Counter() -> Element {
    let mut count = use_signal(|| 0);

    global_css!("
        body {
            background: slategray;
        }
    ");

    let container = css!("
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
    ");

    let title = css!("color: white");

    let button = css!("
        border: none;
        padding: 8px 16px;
        border-radius: 4px;

        background: deepskyblue;
        transition: background 0.2s ease-out;

        &:hover {
            background: aquamarine;
        }
    ");

    rsx!(
        div {
            class: "{container}",
            h1 { class: "{title}", "Counter: {count}" }
            button { class: "{button}", onclick: move |_| count += 1, "Increment" }
            button { class: "{button}", onclick: move |_| count -= 1, "Decrement" }
        }
    )
}

有关完整示例，请参阅 examples/dioxus_counter.rs。

功能

sir 使用 rsass 对所有 SCSS 编译。 rsass 不完整，但“适用于个人项目”。

类似 Crates

Rustyle 看起来非常酷，但文档不是很好，并且已被放弃。它似乎是从头开始实现所有解析和代码生成的。

css_rs_macro 来自 Percy 项目看起来很有希望，但它使用自定义的、稍微冗长一些的语法，并且当前的实现看起来有些不太正常。

技术细节

在编译时，为每个 css! 宏生成一个类名。提供的 SCSS 被包装在该类的选择器中，并使用 rsass 编译。

在每个 css! 调用位置，生成一些代码，将在运行时将生成的 CSS 注册到全局 CSS_COLLECTION 变量。使用静态 bool 确保我们只注册一次 CSS。

为什么不收集所有 CSS 以在编译时完成？

我可能错了，但似乎没有一种干净的方法可以在编译时全局收集CSS。过程宏只能在单个项目上工作（或者，实验性地，在单个文件上）。构建脚本不允许修改源代码（因此我们无法轻松地将生成的CSS class与css!宏返回的内容同步），并且必须在它们自己的源代码解析上（容易出错且混乱）。

还有 linkme，它可以将一些工作推迟到链接时间，但它似乎已经被遗弃了。