3 个版本

0.0.3	2023 年 5 月 18 日
0.0.2	2023 年 5 月 18 日
0.0.1	2023 年 5 月 18 日

#2598 在解析实现

LGPL-3.0-or-later

22KB
442 行

inline-css

将 CSS 直接嵌入到您的 Rust 代码中。

示例

use inline_css::css;

fn main() {
    let css = css! {
        h1 {
            color: red;
        }
    };
    
    println!("{css}");
}

语法问题

`margin:10em;`

这不起作用，因为 Rust 期望在 e 后面有一个指数。解决方案是编写 10m，该宏隐式将其转换为 10em。

`padding: calc(10 - 1);`

不支持，请使用 padding: {10 - 1}; 代替。

`color: #0000ef;`

无法解析，请使用 color: #0xff00ff; 代替。

`color: #0x0ff;`

被解释为 color: #0x0000ff;，请使用 color: #0x00ffff; 代替。

待办事项

文档
解析 h1::after {}

`lib.rs`:

将 CSS 直接嵌入到您的 Rust 代码中。

示例

use inline_css::*;

let x = 42;

let css = css! {
    h1 {
        color: red;
        background-color: #0x00ffff; // not #00ffff
        padding: 10px;
        margin-left: 10m; // not 10em
        margin-right: -4%;
    }
};

println!("{css}");

如何使用

使用 css! {..} 宏将 CSS 直接嵌入到您的 Rust 代码中。在您的 Rust 程序的编译时，您的 css! 调用内的内容将被检查并转换为 CSS 实例。这确保了所有 css! 宏调用在运行时都保证是有效的 CSS。

与 inline-xml 集成

inline-css 为 CSS 实现了 ToXml，以便与 inline-xml 集成。

示例

extern crate inline_xml;
use inline_xml::xml;
use inline_css::css;

let css = css! {
    h1 {
        color: red;
    }
};

let html = xml! {
    <html>
        <head>
            <style>{css}</style>
        </head>
        <body>
            <h1>Hello World</h1>
        </body>
    </html>
};

变体

有 3 个宏

`css!`

解析整个 CSS 片段。

use inline_css::*;

let rule: CSS = css! {
    h1 {
        color: red;
    }

    .button {
        color: blue;
    }

    #text {
        color: green;
    }
};

`css_rule!`

解析单个 CSS 规则。

use inline_css::*;

let rule: Rule = css_rule! {
    h1 {
        color: red;
    }
};

`css_value!`

解析 CSS 值。

use inline_css::*;

let value: Value = css_value! { 10px };

动态数据

您可以将动态生成数据包含在 css! 宏调用中。

仅支持实现 Into<Value> 类型的。

示例

use inline_css::*;

let x = 42;
let css = css! {
    h1 {
        attr: {x + 1};
    }
};

依赖项

~1.5MB
~36K SLoC

3 个版本

inline-css

示例

语法问题

margin:10em;

padding: calc(10 - 1);

color: #0000ef;

color: #0x0ff;