LESS→CSSコンパイラー: 無料でオンラインコンパイル
less.jsを搭載したこのブラウザベースのツールでLESSソースをCSSにコンパイルします。変数、ネスト、ミックスイン、darken、lighten、mixのカラー関数に対応しています。コードを貼り付けまたは.lessファイルをドラッグ&ドロップし、計算モードを選んで生成されたスタイルシートを確認しましょう。JavaScriptの補間は安全性のため無効化されています。処理はデバイス内で行われ、アップロードはありません。
LESS→CSSコンパイラーは、less.jsを搭載したブラウザベースのLESS→CSSコンパイラーです。LESSソースをCSS出力に変換するため、内容を貼り付けたり.lessファイルをドラッグ&ドロップしたりしてスタイルシートを変換できます。このツールはクライアントサイドで動作し、ソースをアップロードしません。
このコンパイラーはLESSの変数、ネスト、ミックスイン、darken、lighten、mixのカラー関数に対応しています。これらのLESS構文はコンパイル済みCSSに解決され、確認とコピーができます。計算モードを選べますが、JavaScriptの補間は安全性のため無効化されています。
LESSはスタイルシートコードの整理と再利用を助ける機能でCSSを拡張し、CSSはブラウザが使うスタイルシート形式です。LESSをCSSにコンパイルすることで、簡易変換のためにローカルツールチェーンを必要とせず、結果のスタイルシートを使ったり確認したりできます。利用可能な計算モードで、コンパイル中の数式の扱い方を選べます。
変換は完全にブラウザ上で実行されます。入力はデバイス上で処理され、サーバーへのアップロードや送信は行われません。ページの読み込み後はツールがオフラインで動作し続けられます。.lessファイルの変換、ビルド前の出力確認、コンパイル済みCSSの検証をしたい開発者やDevOpsエンジニアに役立ちます。
手順1: LESSソースを入力欄に貼り付けるか、.lessファイルをツールにドラッグ&ドロップします。
手順2: コンパイル前に計算モードを選びます。JavaScriptの補間は安全性のため無効化されています。
手順3: コンパイル済みCSS出力を確認します。変数、ネスト、ミックスインなどの対応LESS機能の結果が含まれています。
手順4: CSSをプロジェクト用にコピーしたり、LESSソースのコンパイル結果を確認したりします。
用途: ローカルツールチェーンをインストールせずにLESSソースファイルをCSSに変換できます。簡易チェックや単発の変換に便利です。
用途: LESSソースがビルドステップに進む前にコンパイルできるか確認でき、問題の早期発見に役立ちます。
用途: 生成されたCSSを確認して、ソース内の変数、ネストされたルール、ミックスインの出力内容を理解できます。
用途: darken、lighten、mixのカラー関数がコンパイル済みスタイルシートでどう表れるかプレビューできます。
用途: 異なる計算モードを選んだ後のコンパイル結果を比較し、どの出力がニーズに合うか確認できます。
用途: 処理をデバイス内に留めたまま、貼り付けたLESSスニペットやドラッグ&ドロップした.lessファイルを変換できます。