CSSinRust

CSSinRust通过提供一种组件级别的样式方式，为web-sys应用程序实现CSS样式提供了一种新的方法。它的目的是通过这种方式使使用Rust编写Web前端变得有吸引力。该库的设计理论上可以与任何框架一起工作。然而，目前只针对yew有一个实现。欢迎拉取请求，无论是为了提高代码质量、集成解决方案还是功能。

请注意，该项目仍在积极开发中，未来的更改可能会破坏您的代码。我还没有确定整体设计，但我需要这样的东西，我相信其他人也需要。

如果您想保持最新状态或想支持我的工作，请访问以下平台

• Twitter
• Patreon

语法

目前仅支持一个非常基本的语法集合。尽管语法与CSS非常相似，但CSSinRust中有一些特性是受到SASS和styled-components in JS的启发。

以下是如何定义基本样式的示例。

let style = match css_in_rust::Style::create(
    "Component", // The class prefix
    // The actual css
    r#"
    background-color: red;

    .nested {
        background-color: blue;
        width: 100px
    }"#,
) {
    Ok(style) => style,
    Err(error) => {
        panic!("An error occured while creating the style: {}", error);
    }
};

所以，除了条件块之外的所有内容都将应用于应用此样式的组件的类。这如何发生取决于所使用的框架。以下是一些支持框架的示例。

您放入的样式将被解析并转换为实际的CSS，并自动附加到您的HTML文档的head中。

您还可以使用 & 标识符来在样式化的元素上使用CSS选择器或伪类

&:hover {
  background-color: #d0d0d9;
}

您还可以使用其他CSS规则，例如关键帧

@keyframes mymove {
  from {
    top: 0px;
  }
  to {
    top: 200px;
  }
}

请注意，目前CSSinRust无法解析动画名称以确保其唯一性。如果您需要此功能，请对该问题进行投票或如果没有，请创建一个新的问题。

现在也支持媒体查询了！

@media only screen and (max-width: 600px) {
  background-color: #303040;

  .nested {
    background-color: lightblue;
  }

  &:hover {
    background-color: #606072;
  }
}

集成

种子

为了启用所有yew集成，请在您的Cargo.toml中使用CSSinRust的seed_integration功能。然后创建一个样式并像这样与yew一起使用

pub(crate) struct Model {
    pub style: css_in_rust::Style,
}

impl Default for Model {
    fn default() -> Self {
        let style = match css_in_rust::Style::create(
            String::from("Component"),
            String::from(
                r#"
                background-color: #303040;
                color: #DDDDDD;
                padding: 5px;
                &:hover {
                    background-color: #606072;
                }
                "#,
            ),
        ) {
            Ok(style) => style,
            Err(error) => {
                panic!("An error occured while creating the style: {}", error);
            }
        };
        Self {
            style: style,
        }
    }
}

#[derive(Clone)]
pub(crate) enum Msg {
}

pub(crate) fn update(msg: Msg, model: &mut Model, _: &mut impl Orders<Msg>) {
}

pub(crate) fn view(model: &Model) -> impl View<Msg> {
    div![
        model.style.clone(),
        "Hello, World"
    ]
}

Yew

为了启用所有yew集成，请在您的Cargo.toml中使用CSSinRust的yew_integration功能。然后创建一个样式并像这样与yew一起使用

impl Component for HelloComponent {
    type Message = ();
    type Properties = ();

    fn create(_: Self::Properties, _: ComponentLink<Self>) -> Self {
        let style = match css_in_rust::Style::create(
            "Component",
            "background-color: #505050;",
        ) {
            Ok(style) => style,
            Err(error) => {
                panic!("An error occured while creating the style: {}", error);
            }
        };
        HelloComponent {
            style,
        }
    }

    fn update(&mut self, _: Self::Message) -> ShouldRender {
        true
    }

    fn view(&self) -> Html {
        html! {<div class=self.style.clone()>{"Hello World!"}</div>}
    }
}

CSSinRust版本和对应的Yew版本