CSS2JSは、CSSからJavaScript用のコードに変換してくれるWebサービスです。また、逆にJavaScriptのコードからCSSに変換することも可能です。
ユーザー登録不要で、すぐに利用できます。
CSS2JSの使い方
CSS2JSにアクセスして、CSSのコードを入力するだけです。
最初にサンプルが入っていますが、例えば以下のCSSを入力すると、
display: block;
font-size: 16px;
background: #1e2f5d;
color: #a4cff4;
font-family: "Inter", sans-serif;
font-weight: bold;
以下のようなJavaScript用のコードに変換してくれます。
{
display: "block",
fontSize: 16,
background: "#1e2f5d",
color: "#a4cff4",
fontFamily: "'Inter', sans-serif",
fontWeight: "bold",
}
変換する処理を変更したい場合は、上部のプルダウンから選択します。
変換処理の種類は以下から選択可能です。
- CSS → JS object
- CSS → React props
- JS object → CSS
- JS object → React props
- React props → JS object
あとがき
非常にシンプルなサービスですが、かなり重宝するケースはありそうですね。
CSSをJavaScript用のコードに変換するのが面倒な際はぜひご活用ください。