Stylers

• 为 Leptos 等Rust 网页框架提供作用域 CSS。
• style! 宏允许在 Rust 函数内直接编写 CSS。它还会验证 CSS 属性。
• style_sheet! 宏用于在外部 CSS 文件中编写 CSS，并在 Rust 函数中导入。
• style_str! 宏与 style! 宏相同，但返回的是元组 (class_name, style_val)，而不是将 style_val 保存到单独的文件中。
• style_sheet_str! 与 style_sheet! 宏相同，但返回的是元组 (class_name, style_val)，而不是将 style_val 保存到单独的文件中。

重要提示

• 本 Readme 文件针对 stylers 1.0.0-alpha 的最新版本。您可以在此处找到先前版本的 Readme。

安装

cargo添加 stylers

先决条件

• 如果您正在使用 style 或 style_sheet 宏，则必须在您的 Cargo.toml 文件中将 stylers crate 添加为依赖项和构建依赖项。

[dependencies]
stylers = { version = "*" }

[build-dependencies]
stylers = {  version = "*" }

• 然后，您必须在您的根目录中添加 build.rs 文件，并在其中添加以下代码片段。

use stylers::build;

fn main() {
    build(Some(String::from("./target/main.css")));
}

• 在上面的例子中，输出 CSS 文件将生成在 ./target/main.css 路径下。您可以将该 main.css 文件包含到您的 index.html 文件中。（如果您使用的是 Trunk.rs 等构建工具，则必须遵循相应的方法将 main.css 文件包含到项目中）。

您可以在此处找到这些新更改的重要性。

Leptos 示例

注意：Leptos 版本 > 0.4.9 有一些新变化。但 stylers 在所有版本的 Leptos 中都按相同的方式工作。

style!

#[component]
fn Hello(cx: Scope, name: &'static str) -> impl IntoView {
    let styler_class = style! {
        #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_sheet!

#[component]
fn Hello(cx: Scope, name: &'static str) -> impl IntoView {
    let class_name = style_sheet!("./hello.css");
    view! {cx, class = class_name,
        <div class="one">
            <h1 id="two">"Hello"</h1>
            <h2>"World"</h2>
        </div>
    }
}

• 在上面的情况下，hello.css 文件位于项目的 root 目录中。

style_str!

#[component]
pub fn GreenButton(cx: Scope) -> impl IntoView {
    let (class_name, style_val) = style_str! {
        button {
            background-color: green;
            border-radius: 8px;
            border-style: none;
            box-sizing: border-box;
            color: yellow;
            cursor: pointer;
            display: inline-block;
            font-family: r#"Haas Grot Text R Web"#, r#"Helvetica Neue"#, Helvetica, Arial, sans-serif;
            font-size: 14px;
            font-weight: 500;
            height: 40px;
            line-height: 20px;
            list-style: none;
            margin: 0;
            outline: none;
            padding: 10px 16px;
            position: relative;
            text-align: center;
            text-decoration: none;
            transition: color 100ms;
            vertical-align: baseline;
            user-select: none;
            -webkit-user-select: none;
        }
        button:hover{
            background-color: yellow;
            color: green;
        }
    };

    view! {cx, class = class_name,
        <style>{style_val}</style>
        <button>"I am green button"</button>
    }
}

style_sheet_str!

#[component]
pub fn BlueButton(cx: Scope) -> impl IntoView {
    let (class_name, style_val) = style_sheet_str!("./src/button.css");

    view! {cx, class = class_name,
        <style>{style_val}</style>
        <button>"I am blue button"</button>
    }
}

• 在这种情况下，button.css 文件位于项目的 src 目录中。

自定义伪类

• 在某些情况下，我们可能需要我们的 CSS 对 DOM 树 deep down 产生影响。为了实现这一点，我们有一个自定义伪类 :deep()。例如下面的 CSS 是有效的。

输入

div :deep(h3) {
    color: orange;
}

输出

div.l-243433 h3{color: orange;}

• 如果您想特定的 CSS 成为 global，您可以在它前面不使用任何选择器使用 :deep() 指令。

输入

:deep(h3 div) {
    color: orange;
}

输出

h3 div{color: orange;}

它是如何工作的

• 此 stylers::build 方法将在构建步骤中解析路径 /src/**/*.rs 下的所有 rust 文件，以查找使用 style 和 style_sheet 宏的地方，并生成单个输出 CSS 文件。
• style_str 和 style_sheet_str 直接返回元组（class_name，output_css）。

处理 style! 宏的边缘情况

• 默认情况下，CSS 属性值周围的引号（"）将被删除。如果用户想保留引号，他们必须像下面这样使用 raw_str 包围它
• 这些规则适用于 style! 和 style_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 构建过程（仅在您使用 style! 或 style_sheet! 宏时）

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

• 在 Trunk.toml 中，您必须添加以下行，将 main.css 文件从 ./target/ 目录移动到 ./dist/ 目录。

[[hooks]]
stage = "post_build"
command = "sh"
command_arguments = ["-c", "cp ./target/main.css $TRUNK_STAGING_DIR/"]

• 当您使用 style_sheet! 宏包含外部 CSS 文件时，每次您修改 CSS 文件，都必须保存相应的 rust 文件（*.rs），以便在浏览器上更新 CSS。有关 Trunk 的更多信息，请参阅此处。
• 如果样式有问题，请删除 ./target/stylers 目录并重新构建您的包。如果问题仍然存在，请在此处提出问题。