本文へスキップ
変換ツール

Less → CSS 変換｜ブラウザで Less をコンパイル

Less の変数やネストを CSS に展開します。スタイルの試作や、生成される CSS の確認に利用できます。

Less の変数・ネスト・ミックスインから生成される CSS を確認する。

Less

CSS

こんなときに使えます

  • Less の変数・ネスト・ミックスインから生成される CSS を確認する。
  • 素の CSS を使うプロジェクト向けに、小さな Less ファイルを変換する。

使い方

  1. Less のコードを入力するか .less ファイルを読み込みます。
  2. 対象ブラウザに応じてプレフィックスの設定を選びます。
  3. 生成された CSS を確認し、コピーして利用します。

入力例

@color: #2563eb;
.link { color: @color; }

出力例

.link {
  color: #2563eb;
}

仕様と注意点

変数の定義漏れや括弧の閉じ忘れはエラーの原因になります。まず短いコードから確認してください。

入力コードはブラウザで変換します。外部 URL の import を含めると外部リソースが参照される場合があるため、単独で完結する例を推奨します。

複数ファイルのパス解決やプロジェクト固有のプラグイン設定は再現しません。出力のプレフィックスは対象ブラウザの設定で変わります。

入力内容は同じタブ内に一時保存され、再読み込みや同じ入力形式のツールで再表示される場合があります。共用端末では、使い終わったら入力欄をクリアしてください。

よくある質問

lessc でコンパイルした結果と同じですか？

lessc と同じ公式コンパイラー less.js を使うため、単体で完結するコードは既定の設定で同じ CSS になります。ローカルファイルの import やプラグインなど、プロジェクト固有の機能は使えません。

@import を含む Less をコンパイルできますか？

パソコン内の別ファイルを指す import はブラウザから解決できません。読み込まれるコードを貼り付けてまとめるか、プロジェクト全体を lessc でコンパイルしてください。

Less と CSS の違いは何ですか？

Less は CSS のプリプロセッサーです。変数・ネスト・ミックスイン・関数を使えますが、ブラウザで使う前に CSS へコンパイルする必要があります。

仕様を確認する