SCSSをCSSに変換 — ブラウザで動くSassコンパイラ

いいえ。変換はすべてこのブラウザの中で終わり、コードはどこにも送らず保存もしません。会社のソースや設定ファイルを貼り付けても大丈夫です。このブラウザに残るのは最後に開いた変換だけです。変換器（コンパイラ）のファイル自体はこのサイトから受け取りますが、受け取った後はコードがブラウザの外に出ることはありません。

方向ごとにURLが分かれています。Pug ⇄ HTMLのタブは/codeconvと/codeconv/html-pugの2つのURLを持ち、設定行の真ん中の⇄ボタンを押すと画面と一緒にURLも変わります。ですから今見ている方向をそのままリンクで送れますし、戻るボタンで直前の方向に戻れます。⇄を押したときに結果があれば、その結果が逆方向の入力に移るので、変換して戻したものが元と同じか、その場で確かめられます。

タブバー右端の「すべての変換」を押すと、マークアップ・スタイル・スクリプト・データのまとまりで16方向すべてが並びます。変換器を受け取る必要がある方向にはその重さ（例：694KB）が添えてあるので、押す前に少し待つことになるかどうかが分かります。サイトのどこでも使えるCtrl/⌘+Kからも、それぞれの変換へ直接移動できます。

これらの構文は別のファイルを読み込む命令ですが、ブラウザには触れるファイルシステムがありません。サーバーに上げれば可能ですが、それではコードを送ることになるので、この道具はその方法を取っていません。読み込みたかったファイルの中身を同じ欄に貼り付ければそのまま変換できます。Lessの@importも事情は同じです。

あえて抜き出しません。入れ子を整えるだけです。どの値を変数にするかはそのプロジェクトの設計ルールが決めることで、自動で抜き出すと$color-1・$size-3のような意味の分からない名前になり、かえって読みにくくなります。var(--x)のようなCSS変数もそのままにします — SCSS変数に変えるとビルド時に値が固定され、実行時にテーマを切り替える動きが失われるからです。CSS → Lessも同じ規則です。

変わりません。セレクタを入れ子にまとめるだけで順序や意味は変えず、メディアクエリ・!important・@font-faceはそのままです。カンマでつないだセレクタ（.a, .b）は分けると宣言が複製されるので、ひとまとまりで残します。検査でも生成したSCSSをもう一度CSSにコンパイルして、意味が同じかを確かめています。設定行の⇄ボタンで自分でも確かめられます。

いいえ。この道具は型を取り除くだけです（Sucrase）。型が正しいかを見るにはエディタかtsc --noEmitを使ってください。その代わり速く、受け取るファイルも小さくて済みます — 型検査まで行うコンパイラは数MBあり、ウェブページで受け取るには重すぎます。namespaceやdeclare moduleのような型専用の構文は、空になるかそのまま残ることがあります。

ほとんどそのまま使えます。classはclassName、forはhtmlFor、style文字列はオブジェクト、コメントは{/* */}になり、stroke-widthなどのSVG属性もキャメルケースに直します。ただしonclick="save()"のような属性は、Reactが関数しか受け取らないため() => { save() }で包みます — その関数がコンポーネントの中にある必要があります。valueやcheckedがそのまま残ると変更できない入力欄になるので、defaultValue・defaultCheckedにするかを決めてください。こうした箇所は変換後に問題パネルが知らせます。

画面の結果をコピーしてテキストエディタに貼って保存すると、ExcelがUTF-8だと分からずに読むためです。ダウンロードボタンで受け取るファイルにはBOMを付けてあるので、そのまま開けば化けません。入れ子の値はa.bという列に展開し、カンマ・引用符・改行を含む値は規格どおり引用符で囲むので、列がずれることもありません。逆に、Excelからコピーした表はCSV → JSONの方向にそのまま貼り付けられます — タブ区切りも自動で読み取ります。

貼り付けた値だけを見て作った型なので、一度目を通すことをおすすめします。配列の中のオブジェクトはすべて調べ、一部にしかないキーには?を、nullが混じる値には| nullを付けます。それでも、今は数値が入っている場所に実際のレスポンスではnullや文字列が来ることがあります。入れ子のオブジェクトはキー名から取った名前（address → Address）で別に宣言し、名前が重なるときは後ろに番号を付けます。

本物のコンパイラを使っているからです。dart-sassだけで圧縮後およそ694KB、less.jsはおよそ53KBあります。すべての訪問者が背負う理由のない重さなので、その方向を初めて使うときだけ受け取ります。一度受け取ればブラウザが覚えるので、次からはすぐ開きます。反対にJSON・CSV・XML・HTML → Pug・HTML → JSXは追加で受け取るファイルがまったくなく、通信が切れていても動きます。

Reactを読み込む手順が別に必要です。この道具はJSX記法をcreateElement呼び出しに書き換えるだけで、複数のファイルを一つにまとめたり（バンドル）、古いブラウザ向けに構文を下げたり（トランスパイル）はしません。import文もそのまま残るので、出力をVite・webpackなどのバンドラーにそのまま渡せます。React 17から使う自動ランタイムが必要なら、ランタイム設定をautomaticに変えてください。