Styler

• 为Leptos等Rust Web框架提供的scoped 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>
    }
}

工作原理

• Style宏在css目录内生成给定名称的CSS文件。
• 例如，以下代码在./css目录中生成mystyle.css，并生成一个包含所有CSS文件的combined 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目录并重新构建您的包。如果问题仍然存在，请在此处提出问题。