sunbeam

Sunbeam是一个拼写安全的CSS类库

Sunbeam是一个拼写安全的CSS类库。

使用sunbeam，您可以使用css!宏来编写CSS。

稍后，在构建时，运行sunbeam-build来解析这些css!调用，然后生成一个只包含应用程序使用的CSS的CSS文件。

基本用法

cargo new sunbeam-example
cd sunbeam-example

// src/main.rs

#[macro_use]
extern crate sunbeam;

fn main () {
    let classes = css!("mr10 px5 py10 min640:bg-col-red min980:bg-col-custom");
    assert_eq!(classes, "mr10 px5 py10 min640:bg-col-red min980:bg-col-custom");
}

// build.rs

use sunbeam_build;

fn main() {
    // In a real application you might programatically build your file list
    // using something like:
    // `swift_bridge_build::files_in_dir_ending_with("src", "-view.rs")`
    let files_with_css = vec!["src/main.rs"];

    for path in &files_with_css {
        println!("cargo:rerun-if-changed={}", path);
    }

    sunbeam_build::parse_css(files)
        .write_class_declarations("./app.css")
}

cargo check
cat app.css

自定义CSS

Sunbeam的默认样式应该涵盖大多数用例，但某些应用程序可能需要引入新的类来满足其自身需求。

对于某些类型的CSS，sunbeam允许您定义额外的类，这些类在编译时也会进行类型检查。

# Sunbeam.toml

screen-widths = [ 308, 999, ]

[colors]
brand-red = #ff0001

let classes = css!("mb36 ml98 p85 bg-col-brand-red mt5 mr10");
assert_eq!(classes, "mb36 ml98 p85 bg-col-brand-red mt5 mr10");

无效CSS

如果您尝试使用由sunbeam或Sunbeam.toml未定义的类或选择器，您将得到一个编译时错误。

let _classes = css!("d-flex not-a-real-class");

# SHOW THE COMPILE TIME ERROR HERE

待办事项

• 文档解释了为什么Sunbeam不附带调色板。我们希望鼓励视觉多样性。

测试

运行测试套件。

# Clone the repository
git clone [email protected]:chinedufn/sunbeam.git
cd sunbeam

# Run tests
cargo test --all

许可证

sunbeam受以下任一许可证的许可

• Apache许可证第2版 (LICENSE-APACHE 或 https://apache.ac.cn/licenses/LICENSE-2.0)
• MIT许可证 (LICENSE-MIT 或 http://opensource.org/licenses/MIT)