jss!

此包提供了一种使用 JSON 语法轻松编写动态 CSS 的方法。这比你想象的要方便。

考虑为我们的层类使用动态宽度

.layer {
 width: 10px;
}

您需要使用 format! 宏来编写它

let width = 10;
let css = format!("
.layer {{
    width: {}px;
}}
", width);

let expected = r#"
.layer {
    width: 10px;
}
"#;
assert_eq!(expected,css);

哦，我们忘记 Rust 字符串中转义花括号是用花括号完成的，我们的动态 CSS 将会有双重花括号。当更多变量添加到其中时，跟踪格式参数的顺序将变得更加困难。

jss! 来拯救

use jss::prelude::*;

let width = 10;
let css = jss!{
    ".layer": {
     width: px(width),
    }
};

let expected = ".layer{width:10px;}";
assert_eq!(expected,css);

非标识符样式名可以使用 snake_case 编写，或者用引号括起来。

use jss::prelude::*;

let css = jss!(
    ".layer": {
        border: "1px solid green",
        background_color: "red",
        "width": percent(100),
        "border-color": "red!important",
        margin: px(5) + " auto"
    },

    ".hide .layer": {
        opacity: 0,
    },
);

let expected = ".layer{border:1px solid green;background-color:red;width:100%;border-color:red!important;margin:5px auto;}.hide .layer{opacity:0;}";
assert_eq!(expected, css);

在类选择器中使用命名空间以防止与在其他组件中具有类似类名的冲突。

use jss::{jss_ns, units::percent};
let css = jss::jss_ns_pretty!("frame",
    ".": {
        display: "block",
    },

    ".layer": {
        background_color: "red",
        border: "1px solid green",
    },

    "@media screen and (max-width: 800px)": {
      ".layer": {
        width: percent(100),
      }
    },

    ".hide .layer": {
        opacity: 0,
    },
);

let expected = r#"
.frame {
    display: block;
}
.frame__layer {
    background-color: red;
    border: 1px solid green;
}
@media screen and (max-width: 800px) {

    .frame__layer {
        width: 100%;
    }

}
.frame__hide .frame__layer {
    opacity: 0;
}
"#;
assert_eq!(expected, css);

特性 strict 将防止你在样式名中犯拼写错误。使用无效的样式名将导致 panic。

cargo test all --features = "strict"

use jss::prelude::*;

let width = 10;
let css = jss!{
    ".layer": {
     "not-soo-awesome-style-name": px(width), // panicked at 'invalid style name: not-soo-awesome-style-name'
    }
};

许可证：MIT