プロパティと値

プロパティのメソッドはそれぞれ専用の値の型を受け取ります。その型はプロパティのキーワードを持ち、プロパティで使える単位の値を受け付けます。

型の付いた値

プロパティがキーワード 1 つか、value にある型の値 1 つを受け取る場合、その値には型が付きます。display は Display を受け取り、そのバリアントが display のキーワードです。width は Width を受け取り、Width は長さかパーセンテージから変換できます。

use hypersig::style::Style;
use hypersig::style::value::{
    AlignItems, Color, Display, FontFamily, FontWeight, LineHeight, deg, ms, pct, px, quoted, rem,
    url,
};

let style = Style::new()
    // Keywords are enum variants of the property's own type.
    .display(Display::Flex)
    .align_items(AlignItems::Center)
    .font_family(FontFamily::SystemUi)
    .font_weight(FontWeight::Number(600.0))
    .line_height(LineHeight::Number(1.5))
    // Lengths, percentages, times, and angles have constructors.
    .width(pct(50))
    .padding(rem(1))
    .border_width(px(1))
    .transition_duration(ms(150))
    .rotate(deg(3))
    // Colors are named, hex, RGB, or mixed.
    .color(Color::CRIMSON)
    .background_color(Color::hex(0x00fa_fafa).mix(&Color::WHITE, 50))
    .border_color(Color::rgb(228, 228, 231))
    .background_image(url("/paper.png"))
    .content(quoted("→"));

値	書き方
長さ	`px(1)`、`rem(1.5)` などの単位
パーセンテージ	`pct(50)`
時間と角度	`ms(150)`、`secs(1)`、`deg(90)`、`turn(0.5)`
色	`Color::CRIMSON` などの名前付きの色、`Color::hex`、`Color::rgb`、`opacity`、`mix`、`Color::CURRENT_COLOR`、`Color::TRANSPARENT`
テキストと URL	`quoted("→")` はテキストをエスケープし、`url("/a.png")` は `url("...")` を書きます
どのプロパティでも	`inherit`、`initial`、`unset`、`revert`、`revert-layer` には `keyword(Property::Color, CssWideKeyword::Inherit)`

コンパイルできないもの

綴りを間違えたプロパティにはメソッドがなく、綴りを間違えたキーワードにはバリアントがなく、型の違う値には変換がありません。

use hypersig::style::Style;
use hypersig::style::value::Color;

// error[E0277]: the trait bound `hypersig::hypersig_style::value::Width:
//     From<hypersig::hypersig_style::value::Color>` is not satisfied
let style = Style::new().width(Color::CRIMSON);

値の範囲は検査しないので、負の幅もコンパイルが通り、ブラウザはその宣言を無視します。margin: 0 auto のように複数の部分からなる値は raw で書きます。raw は検査しない値で説明しています。