コンテンツにスキップ
Lism CSS

pass-get

親要素から複数の子要素に対して同じプロパティを一括で管理したい場合、Lism では以下のような設計ルールを提案します。

  1. 受け渡す値を --pass-{prop}変数で親要素に定義しておく。
  2. 以下のいずれかでその値を適用する。
    • 親要素に-pass:{prop}クラスをつけ、その直下要素すべてにその値を適用する。
    • もしくは、個別の子孫要素に-get:{prop}クラスをつけて、必要な要素でのみ値を適用する。
注意

このpass-get設計に関して、lism-cssではCSSを実際に用意しているわけではありません。
あくまで、このようなクラスがもし必要になった場合は”こうすればよいのでは？”という一つの提案を示します。

NavMenuコンポーネントの作成例では、この設計を採用しています。

Example

Section titled “Example”
↓
data-lism-passの使用例
Lorem ipsum
Dolor Sit
Amet
[data-lism-pass~='p'] > * {
  padding: var(--pass-p);
}
[data-lism-pass~='minW'] > * {
  min-width: var(--pass-minW);
}
↓
data-lism-getの使用例
COLOR
Red
Blue
SIZE
S
M
L
XL
[data-lism-get~='p'] {
  padding: var(--pass-p);
}
[data-lism-get~='minW'] {
  min-width: var(--pass-minW);
}