こんにちは、ワタナベです。
今回は「slideVars」というライブラリを触ってみました。
slideVarsはCSSのカスタムプロパティ(変数)を操作するためのUIを自動で作成してくれます。
導入すると画面上にUIが現れ、リアルタイムでデザインが変化するようになります!
:rootに定義されているCSSプロパティを自動スキャンし、色や数値を検知してカラーピッカーやスライダーを作成します。
以下サンプルです。
SAMPLE
See the Pen Untitled by Akiho (@wcaotdaenpaebne) on CodePen.
jsを読み込むだけで簡単に使用できます。
サンプルでは各背景色、角丸、フォントサイズ、カラーを変更できます。
リアルタイムで変化するので、スタイルの微調整や色を変えた時どう見えるか等を見るのに使えそうです!
是非使ってみてください。
それではまた次回。
ご閲覧ありがとうございました。
