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的最新版本。您可以在此处找到之前版本的说明。

安装

cargoadd 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()。例如，下面的CSS是有效的。

输入

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

输出

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

• 如果您想让特定的CSS是全局的，您可以在没有任何前缀选择器的情况下使用:deep()指令。

输入

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

输出

h3 div{color: orange;}

它是如何工作的

• 这个stylers::build方法将在构建步骤中解析路径/src/**/*.rs中的所有Rust文件，以找到使用style和style_sheet宏的地方，并生成单个输出CSS文件。
• style_str和style_sheet_str直接返回元组（类名，输出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目录并重新构建您的包。如果问题仍然存在，请在此处提出问题。