插曲：样式设计

Interlude: Styling

任何创建网站或应用的人很快都会遇到样式设计的问题。对于小型应用，单个 CSS 文件可能足以支撑用户界面的样式。但随着应用规模的扩大，许多开发者发现原生 CSS 变得越来越难以管理。

Anyone creating a website or application soon runs into the question of styling. For a small app, a single CSS file is probably plenty to style your user interface. But as an application grows, many developers find that plain CSS becomes increasingly hard to manage.

一些前端框架（如 Angular、Vue 和 Svelte）提供了内置的方法来将 CSS 限定在特定组件的作用域内，从而更容易在整个应用中管理样式，而不会让旨在修改一个小组件的样式产生全局影响。其他框架（如 React 或 Solid）不提供内置的 CSS 作用域化功能，而是依赖生态系统中的库来完成。Leptos 属于后者：框架本身对 CSS 没有任何倾向，但提供了一些工具和原语，允许其他人构建样式库。

Some frontend frameworks (like Angular, Vue, and Svelte) provide built-in ways to scope your CSS to particular components, making it easier to manage styles across a whole application without styles meant to modify one small component having a global effect. Other frameworks (like React or Solid) don’t provide built-in CSS scoping, but rely on libraries in the ecosystem to do it for them. Leptos is in this latter camp: the framework itself has no opinions about CSS at all, but provides a few tools and primitives that allow others to build styling libraries.

这里有几种不同的 Leptos 应用样式设计方法，从原生 CSS 开始。

Here are a few different approaches to styling your Leptos app, starting with plain CSS.

原生 CSS

Plain CSS

使用 Trunk 进行客户端渲染

Client-Side Rendering with Trunk

trunk 可用于将 CSS 文件和图像与你的网站捆绑在一起。为此，你可以通过在 index.html 的 <head> 中定义它们，将其作为 Trunk 资源添加。例如，要添加位于 style.css 的 CSS 文件，你可以添加标签 <link data-trunk rel="css" href="./style.css"/>。

trunk can be used to bundle CSS files and images with your site. To do this, you can add them as Trunk assets by defining them in your index.html in the <head>. For example, to add a CSS file located at style.css you can add the tag <link data-trunk rel="css" href="./style.css"/>.

你可以在 Trunk 文档关于资产（assets）的部分找到更多信息。

You can find more information in the Trunk documentation for assets.

使用 `cargo-leptos` 进行服务端渲染

Server-Side Rendering with `cargo-leptos`

cargo-leptos 模板默认配置为使用 SASS 捆绑 CSS 文件，并将其输出到 /pkg/{project_name}.css。如果你想加载额外的 CSS 文件，既可以将它们导入到该 style.scss 文件中，也可以将它们添加到 public 目录中。（例如，public/foo.css 处的文件将通过 /foo.css 提供服务。）

The cargo-leptos templates are configured by default to use SASS to bundle CSS files and output them at /pkg/{project_name}.css. If you want to load additional CSS files, you can do so either by importing them into that style.scss file, or by adding them to the public directory. (A file at public/foo.css, for example, is served at /foo.css.)

要在组件中加载样式表，你可以使用 Stylesheet 组件。

To load stylesheets in a component, you can use the Stylesheet component.

TailwindCSS：实用程序优先的 CSS

TailwindCSS: Utility-first CSS

TailwindCSS 是一个流行的实用程序优先（utility-first）的 CSS 库。它允许你通过使用内联实用程序类来设计应用样式，并配合一个自定义的 CLI 工具扫描你的文件中的 Tailwind 类名，然后捆绑必要的 CSS。

TailwindCSS is a popular utility-first CSS library. It allows you to style your application by using inline utility classes, with a custom CLI tool that scans your files for Tailwind class names and bundles the necessary CSS.

这允许你编写如下组件：

This allows you to write components like this:

#[component]
fn Home() -> impl IntoView {
    let (count, set_count) = signal(0);

    view! {
        <main class="my-0 mx-auto max-w-3xl text-center">
            <h2 class="p-6 text-4xl">"Welcome to Leptos with Tailwind"</h2>
            <p class="px-10 pb-10 text-left">"Tailwind will scan your Rust files for Tailwind class names and compile them into a CSS file."</p>
            <button
                class="bg-sky-600 hover:bg-sky-700 px-5 py-3 text-white rounded-lg"
                on:click=move |_| *set_count.write() += 1
            >
                {move || if count.get() == 0 {
                    "Click me!".to_string()
                } else {
                    count.get().to_string()
                }}
            </button>
        </main>
    }
}

起初设置 Tailwind 集成可能会有点复杂，但你可以查看我们的两个示例，了解如何将 Tailwind 与客户端渲染的 trunk 应用或服务端渲染的 cargo-leptos 应用配合使用。cargo-leptos 还有一些内置的 Tailwind 支持，你可以将其作为 Tailwind CLI 的替代方案。

It can be a little complicated to set up the Tailwind integration at first, but you can check out our two examples of how to use Tailwind with a client-side-rendered trunk application or with a server-rendered cargo-leptos application. cargo-leptos also has some built-in Tailwind support that you can use as an alternative to Tailwind’s CLI.

Stylers：编译时 CSS 提取

Stylers: Compile-time CSS Extraction

Stylers 是一个编译时作用域 CSS 库，允许你在组件主体中声明作用域 CSS。Stylers 会在编译时将这些 CSS 提取到 CSS 文件中，然后你可以将其导入到应用中，这意味着它不会增加应用的 WASM 二进制文件大小。

Stylers is a compile-time scoped CSS library that lets you declare scoped CSS in the body of your component. Stylers will extract this CSS at compile time into CSS files that you can then import into your app, which means that it doesn’t add anything to the WASM binary size of your application.

这允许你编写如下组件：

This allows you to write components like this:

use stylers::style;

#[component]
pub fn App() -> impl IntoView {
    let styler_class = style! { "App",
        #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! { class = styler_class,
        <div class="one">
            <h1 id="two">"Hello"</h1>
            <h2>"World"</h2>
            <h2>"and"</h2>
            <h3>"friends!"</h3>
        </div>
    }
}

Stylance：在 CSS 文件中编写作用域 CSS

Stylance: Scoped CSS Written in CSS Files

Stylers 让你在 Rust 代码中内联编写 CSS，在编译时提取它并对其进行作用域化。Stylance 允许你在组件旁边的 CSS 文件中编写 CSS，将这些文件导入到组件中，并将 CSS 类限定在你的组件作用域内。

Stylers lets you write CSS inline in your Rust code, extracts it at compile time, and scopes it. Stylance allows you to write your CSS in CSS files alongside your components, import those files into your components, and scope the CSS classes to your components.

这与 trunk 和 cargo-leptos 的热重载功能配合得很好，因为编辑后的 CSS 文件可以立即在浏览器中更新。

This works well with the live-reloading features of trunk and cargo-leptos because edited CSS files can be updated immediately in the browser.

import_style!(style, "app.module.scss");

#[component]
fn HomePage() -> impl IntoView {
    view! {
        <div class=style::jumbotron/>
    }
}

你可以直接编辑 CSS，而不会触发 Rust 重新编译。

You can edit the CSS directly without causing a Rust recompile.

.jumbotron {
  background: blue;
}

Styled：运行时 CSS 作用域化

Styled: Runtime CSS Scoping

Styled 是一个与 Leptos 集成良好的运行时作用域 CSS 库。它允许你在组件函数体中声明作用域 CSS，然后在运行时应用这些样式。

Styled is a runtime scoped CSS library that integrates well with Leptos. It lets you declare scoped CSS in the body of your component function, and then applies those styles at runtime.

use styled::style;

#[component]
pub fn MyComponent() -> impl IntoView {
    let styles = style!(
      div {
        background-color: red;
        color: white;
      }
    );

    styled::view! { styles,
        <div>"This text should be red with white text."</div>
    }
}

欢迎贡献

Contributions Welcome

Leptos 对于你如何设计网站或应用的样式没有任何倾向，但我们非常乐意为你尝试创建的任何旨在简化此过程的工具提供支持。如果你正在开发一种 CSS 或样式处理方法，并希望将其添加到此列表中，请告诉我们！

Leptos has no opinions on how you style your website or app, but we’re very happy to provide support to any tools you’re trying to create to make it easier. If you’re working on a CSS or styling approach that you’d like to add to this list, please let us know!

Keyboard shortcuts