CSSプリプロセッサ変換ツール

使い方

1. 1 変換元の言語と変換先の言語を選びます。
2. 2 スタイルシートを貼り付けます。
3. 3 入力と同時に結果が表示されます。重量のあるライブラリは初回の変換時に必要な分だけ読み込まれます。
4. 4 結果をコピーするか、ファイルとしてダウンロードします。

このツールを使う理由

• LESS、SCSS、SASS(インデント記法)、Stylus、純粋なCSSの5形式すべてに対応。
• 可能な場合は本物のコンパイラを使用: <code class="rounded bg-slate-100 px-1 text-xs dark:bg-slate-800">less</code>、<code class="rounded bg-slate-100 px-1 text-xs dark:bg-slate-800">sass</code>、<code class="rounded bg-slate-100 px-1 text-xs dark:bg-slate-800">stylus</code>は「CSSへの変換」に使われます。
• それ以外の変換方向はヒューリスティックな変換(変数記号の置き換え、括弧やインデントの整形)を使用します — 高速ですが完全なトランスパイルではありません。
• 処理はすべてクライアント側で完結 — スタイルシートがブラウザの外に送信されることはありません。

よくある質問

CSSプリプロセッサ変換ツール とは？

CSSプリプロセッサ変換ツールは、LESS、SCSS、SASS、Stylus、純粋なCSSの間でスタイルシートをブラウザ上で変換するツールです。CSSへ変換する方向には本物のコンパイラを使用し、それ以外の変換方向にはヒューリスティックな変換ロジックを用いてプリプロセッサ形式間の構文を変換します。処理はすべてクライアント側で完結します。

機能

例

.a { .b { color: red; } }   (SCSS)

.a .b {
  color: red;
}

主な用途

1. 1

   SCSS を CSS にコンパイル

   ネストされた SCSS をプレーンな CSS に展開し、すばやく貼り付けたり、ビルド不要のページで使用したりできます。

2. 2

   プリプロセッサ間の移行

   ツールチェーンを切り替える際に、スタイルシートを LESS から SCSS へ(またはその逆に)移行します。

3. 3

   コンパイル結果を理解する

   SCSS のネストや変数から実際にどのような CSS が生成されるかを確認できます。

参考文献

• Sass ドキュメント — Sass
• Less ドキュメント — Less
• CSS — MDN — MDN

関連ツール