【CSS】@property構文を使ってカスタムプロパティ（CSS変数）にルールを定義する

@property --main-color {
  syntax:"<color>";
  inherits:true;
  initial-value:#fafafa;
}

body {
 background-color:var(--main-color);
}

@property --property-name {
 syntax:"<number>"; //単一のnumber型の値のみ受け入れる
 //省略 
}

@property --set-position {
  syntax: "<length>+"; // スペース区切りのlength型の値を受け入れる
  inherits: false;
  initial-value: 50px 50px;
}

.hoge {
  translate:var(--set-position);// xに50px、yに50px移動
}

@property --main-color {
  syntax: "<number>#"; // カンマ区切りのnumber型の値を受け入れる
  inherits: false;
  initial-value: 50,255,30;
}

body {
  background-color: rgb(var(--main-color)); // rgb(50,255,30)
}

//複数の決められたルールを繋ぐ
@property --property-name {
 syntax:"<length> | <percentage>"; //長さまたはパーセント値を受け入れるが、両者を組み合わせた calc式は受け入れない（calc(50px * 10%)はだめ）)）
 //省略 
}

//任意の値を繋ぐ
@property --property-name {
 syntax:"small | medium | large"; //「small、medium、large」のいずれかを受け入れる
 //省略 
}

//任意の値と決められたルールとカスタムルールを繋ぐ
@property --property-name {
 syntax:"small | <integer> | <color>#"; //「small、単一の整数、カンマ区切りの色リスト」のいずれかを受け入れる
 //省略 
}

@property --custom-property {
  syntax: "*"; // 全ての値を受け入れる
  inherits: false;
  initial-value: 省略可能;
}

@property --main-color {
  syntax: "<color>";
  inherits: true; //プロパティが継承される
  initial-value: #000;
}

//親要素が初期値を上書き
.parentElement {
  --main-color:#fafafa;// #fafafaに上書き
  background-color:var(--main-color); // #fafafa
}

//子要素
.childElement {
 background-color:var(--main-color); // #fafafa
}

@property --main-color {
  syntax: "<color>";
  inherits: false; //プロパティが継承されない
  initial-value: #000;
}

//親要素が初期値を上書き
.parentElement {
  --main-color:#fafafa;// #fafafaに上書き
  background-color:var(--main-color); // #fafafa
}

//子要素
.childElement {
 background-color:var(--main-color); // #000 初期値が設定される
}

@property --main-color {
  syntax: "<color>";
  inherits: false;
  initial-value: 10;// color型ではない無効な値
}

body {
  background-color: var(--main-color); // background-colorの初期値である、transparent（rgba(0,0,0,0)）が設定される
}

@property --main-color {
  syntax: "<color>";
  inherits: false;
  initial-value: #000;
}

body {
  --main-color:10;//ルール違反
  background-color: var(--main-color); // 10は無視されて#000が入る
}