pass-get
親要素から複数の子要素に対して同じプロパティを一括で管理したい場合、Lism では以下のような設計ルールを設けています。
- 受け渡す値を
--pass-{prop}変数で親要素で定義しておく - 親要素に
-pass:{prop}クラスをつけて、値を直下要素すべてに適用する - 子孫要素に
-get:{prop}クラスをつけて、個別に受けとる
↓
-pass:{prop}の使用例Box
Box
Box
<div class="l--flex l--flex--cluster -ta:c -g:20 -pass:minW -pass:p" style="--pass-p:var(--s20) var(--s30);--pass-minW:5rem"> <div class="-bd:">Box</div> <div class="-bd:">Box</div> <div class="-bd:">Box</div></div> ↓
-get:{prop}の使用例COLOR:
Red
Blue
SIZE:
S
L
XL
<div class="l--stack -ta:c -fz:s -g:10" style="--pass-p:var(--s5) var(--s20);--pass-minW:2.5rem"> <div class="l--flex l--flex--cluster -p:10 -g:20"> <div>COLOR:</div> <div class="-bd: -c: -get:p" style="--c:var(--red)">Red</div> <div class="-bd: -c: -get:p" style="--c:var(--blue)">Blue</div> </div> <div class="a--divider"></div> <div class="l--flex l--flex--cluster -p:10 -g:20"> <div>SIZE:</div> <div class="-bgc:base-2 -get:p -get:minW">S</div> <div class="-bgc:base-2 -get:p -get:minW">L</div> <div class="-bgc:base-2 -get:p -get:minW">XL</div> </div></div>ただし、Lismのコアパッケージで用意しているクラスは最低限に抑えています。必要に応じて同じ形式でCSSを追加してください