01
1. LESSとは
LESS(Leaner Style Sheets)はCSSを拡張したプリプロセッサ言語で、変数・ネスト・ミックスイン・演算といったプログラミング機能をCSSに追加します。ブラウザは純粋なCSSしか理解しないため、公開前にLESSをCSSへコンパイルする必要があります。このツールは公式less.jsエンジンをブラウザで実行して、その変換を即座に行います。
🎨 LESS to CSS コンパイラ
LESSコードを貼り付けると、公式less.jsエンジンで即座にCSSにコンパイルします。変数(@var)、ネスト、ミックスイン、演算、組み込み関数に対応しています。
🔒 コンパイルはブラウザ内だけで実行され、入力したコードはサーバーに送信されません。less.jsバンドルもCDNではなくこのサイトから直接配信しています。
詳しく見る
02
2. 主な機能
変数(@brand: #4A90D9;)で色やサイズを一元管理し、セレクタをネストして構造をそのまま表現できます。ミックスイン(.rounded(6px))で再利用可能なスタイルブロックを作り、(@pad * 2)のような算術演算やdarken()・lighten()などの組み込み色関数も使えます。
03
3. ブラウザコンパイルとセキュリティ
このツールは入力をサーバーに送らず、ブラウザ内だけでコンパイルします。セキュリティのため、LESSのインラインJavaScript実行機能(バッククォート構文)は無効化されており、evalなしで安全に動作します。大規模プロジェクトではビルドパイプライン(webpack、Vite、lescなど)への統合を推奨します。
よくある質問
入力したLESSコードはサーバーに送信されますか?
いいえ。コンパイルはブラウザのJavaScript内だけで行われ、コードはどこにも送信されません。
@importで外部ファイルを読み込めますか?
ブラウザ環境では外部ファイルへのアクセスが制限されるため、リモート@importは失敗する場合があります。単一ファイルのスニペット変換に適しています。
LESSのインラインJavaScript(バッククォート)は使えますか?
いいえ。セキュリティのためJavaScript実行機能はオフになっています。変数・ミックスイン・演算などの標準機能はすべて使えます。
SCSS/Sassもコンパイルできますか?
いいえ、このツールはLESS専用です。LESSとSCSSは構文が異なります。