LessをCSSに変換
LessコードをCSSに変換
Less入力
コンパイル済みCSS
LessをCSSの例
Lessは変数、ネスト、ミックスイン、関数をCSSに追加します。ブラウザはLessを実行しません—プレーンCSSが必要です。例：
変数とネストされたセレクター
Less入力：
コンパイル済みCSS：
上のサンプルでさらにサンプルデータを読み込めます。
LessをCSSとは？
Lessは変数、ネスト、ミックスイン、関数を追加するCSSプリプロセッサです。ブラウザはLessを実行しません—プレーンCSSが必要です。このツールはLessをブラウザ対応のCSSにコンパイルします。Lessドキュメントが構文を定義しています。
コンパイルは完全にブラウザ内で行われます。サーバーには何も送信されません。出力は標準CSSです。逆の変換（CSSをLessに）にはCSSをLessにを。SCSSにはSCSSをCSSにを使用してください。
このツールの使い方
Lessを貼り付けまたはアップロード
Lessをコピーして左のエディターに貼り付けます。アップロードをクリックして.lessまたは.cssファイルを読み込むこともできます。サンプルボタンでサンプルデータを読み込みます。無効なLessはエラーを表示します。
コンパイルされたCSSを確認
右のパネルにコンパイルされたCSSが表示されます。変数は解決され、ネストはフラット化され、ミックスインは展開されます。出力はどのブラウザでも使用できるプレーンCSSです。
コピーまたはダウンロード
コピーまたはダウンロードを使用してください。出力のフォーマットにはCSSフォーマッターを。ミニファイにはCSSミニファイアーを使用してください。
LessをCSSが役立つ場面
プロジェクト（例：Bootstrap 3、Ant Design）やレガシーコードベースからLessがあり、プレーンCSSが必要な場合—クイックテスト、CDNデプロイ、ビルドツールのないシステム—このコンパイルが役立ちます。デバッグにも便利：Lessが生成するCSSを正確に確認できます。
Lessは多くのレガシープロジェクトや一部のUIフレームワークで使用されています。変数をカスタマイズしたりスタイルを抽出する場合、ここでコンパイルすると最終CSSが得られます。既存のCSSをLess構造に変換するにはCSSをLessにを使用してください。
よくある質問
LessとSCSSの違いは？
どちらも変数、ネスト、ミックスインを追加します。Lessは親セレクターに&を使用します。SCSSも同様です。構文は少し異なります。プロジェクトに合わせて選択してください。
@importに対応していますか？
ファイルがアップロードされていない場合、インポートは解決されないことがあります。マルチファイルプロジェクトには公式Lessコンパイラやバンドラーを使用してください。
データはプライベートですか？
はい。コンパイルは完全にブラウザ内で行われます。データはサーバーに送信されません。
ミックスインと関数は？
ミックスインと組み込み関数（例：lighten()、darken()）はコンパイル中に展開されます。出力CSSには解決された値が含まれます。
Bootstrap 3で使えますか？
Bootstrap 3はLessを使用します。完全なBootstrapコンパイルには公式ビルドを使用してください。このツールは単一ファイルのLessまたはスニペットで動作します。
関連ツール
Less：lesscss.orgとLess使用法。MDN CSSとW3C CSSが出力形式を定義しています。