Top Tweets for #0d6efd

7 months ago

MDNを読んでて知った CSSカスタムプロパティの便利技。変数が定義されてるなら、その変数。ないならこの値。みたいな指定ができちゃう...！これ結構便利だなって思ってて、たとえば共通ボタン。 .c-button { background: var(--btn-bg, var(--theme-primary, #0d6efd)); color: var(--btn-fg, #fff); } この一行で、こんな優先順位になる▼ 1．いちばん外側(親要素とか)で `--btn-bg` が設定されていればそれを使う 2．なければ、もう一段階大きなテーマ変数 `--theme-primary` を使う 3．それもなければ、最後に生の色 `#0d6efd` を使うつまり、「上書きしたければ変数を定義すればいいし、何も定義しなくても壊れない」っていうコンポーネントが簡単に作れちゃう。共通パーツを作成するときとか、この書き方で指定しておくとめちゃ管理しやすそう😌 次の案件から早速使ってみよう。

$hirataro_89's tweet photo. MDNを読んでて知った CSSカスタムプロパティの便利技。変数が定義されてるなら、その変数。ないならこの値。みたいな指定ができちゃう...！これ結構便利だなって思ってて、たとえば共通ボタン。 .c-button { background: var(--btn-bg, var(--theme-primary, #0d6efd)); color: var(--btn-fg, #fff); } この一行で、こんな優先順位になる▼ 1．いちばん外側(親要素とか)で `--btn-bg` が設定されていればそれを使う 2．なければ、もう一段階大きなテーマ変数 `--theme-primary` を使う 3．それもなければ、最後に生の色 `#0d6efd` を使うつまり、「上書きしたければ変数を定義すればいいし、何も定義しなくても壊れない」っていうコンポーネントが簡単に作れちゃう。共通パーツを作成するときとか、この書き方で指定しておくとめちゃ管理しやすそう😌 次の案件から早速使ってみよう。$

Top Tweets for #0d6efd

Last Seen Hashtags on Sotwe

Trends for you

Most Popular Users