Styler

• 适用于 Leptos 等 Rust Web 框架的局部 CSS。
• style! 宏还会验证 CSS 属性。

Leptos 示例

#[component]
fn Hello(cx: Scope, name: &'static str) -> impl IntoView {
    
    let styler_class = style! {"Hello",
        #two{
            color: blue;
        }
        div.one{
            color: red;
            content: raw_str(r#"\hello"#);
            font: "1.3em/1.2" Arial, Helvetica, sans-serif;
        }
        div {
            border: 1px solid black;
            margin: 25px 50px 75px 100px;
            background-color: lightblue;
        }
        h2 {
            color: purple;
        }
        @media only screen and (max-width: 1000px) {
            h3 {
                background-color: lightblue;
                color: blue
            }
        }
    };

    view! {cx, class = styler_class,
        <div class="one">
            <h1 id="two">"Hello"</h1>
            <h2>"World"</h2>
            <h2>{name}</h2>
            <h3>"Hello Kanna"</h3>
        </div>
    }
}

工作原理

• 样式宏在 css 目录内生成给定名称的 CSS 文件。
• 例如，以下代码在 ./css 目录中生成了 mystyle.css，并且还生成了一个包含所有 CSS 文件的合并 main.css。

style!{"mystyle",
    h2 {
        color: green;
    }
}

边缘情况

• 默认情况下，CSS 属性值周围的双引号（"）将被删除。如果用户想要保留双引号，他们必须使用以下方式将其包裹在 raw_str 中

输入

style!(
    div{
        content: raw_str(r#"\hello"#);
        font: "1.3em/1.2" Arial;
    }
)

输出

    div.l-23432{
        content: "\hello";
        font: 1.3em/1.2 Arial;
    }

可选的 Trunk 构建过程

• 您必须将生成的 main.css 包含在 index.html 中（例如 <link data-trunk rel="css" href="./main.css">）。

• 在 Trunk.toml 中，您必须添加以下行以防止无限循环

[watch]
ignore = ["./css"]

• 如果出现奇怪的情况，请删除 CSS 目录并重新构建您的包。如果问题仍然存在，请在此处提出问题。