CSSとLESSの相互変換

LESSからCSSへコンパイルする

LESSはCSSを拡張したスタイルシート言語です。通常のCSSに加えて、@colorのような変数、ミックスイン、ネストしたルールなどを記述でき、コンパイルするとブラウザーで使えるCSSになります。このページではLESSコードを入力してCSSを生成し、結果をコピーできます。

逆方向のCSS → LESSは、CSSの構造を解析して書き換える処理ではありません。CSSはLESSでも使えるため、入力したCSSテキストをそのままLESSとして受け取るための経路です。変数の抽出やルールのネスト化が必要な場合は、結果を手作業で編集してください。

変数やネストは出力でどう見えるか

LESSの変数はコンパイル時に値へ置き換わります。たとえば@accent: #1890ff;を背景色に使うと、生成CSSには色の値が記述されます。LESSの@accentがCSSカスタムプロパティの--accentに自動変換されるわけではありません。ブラウザー上で値を切り替えるCSS変数が必要なら、LESS内で--accentを明示します。

ネストしたセレクターは組み合わされて通常のCSSになります。たとえば.buttonの内側に&:hoverを置くと、出力では.button:hoverになります。ミックスインも呼び出した場所に対応する宣言が展開されます。このため、CSSだけから元の変数名やミックスインの境界を完全に復元することはできません。

入力方向を選んで結果をコピーする

1. 変換方向を確認

   方向ボタンに表示される言語を確認します。LESS → CSSではLESSコードをコンパイルし、CSS → LESSではCSSテキストをそのままLESS入力として出力します。

2. コードを入力する

   コードを入力欄に貼り付けます。サンプルを読み込んで、変数やネストを含むLESSの基本形を確認することもできます。空白だけの入力は変換できません。

3. 変換して出力を確認

   変換ボタンを押すと、結果が出力欄に表示されます。エラーが出た場合は、波括弧の対応、変数名、ミックスインの呼び出し、インポート依存を見直してください。

4. コピー後にプロジェクトで照合

   出力欄のコピー操作でコードを取得し、対象プロジェクトに貼り付けます。セレクター、宣言順、相対パス、ページ上の見た目を実際の構成で確認してください。

依存ファイルを使うLESSでは、参照先もコンパイルに必要です。この入力欄にはプロジェクトのフォルダーやファイル群を指定できないため、単独で解析できるコードを用意するか、依存関係を含められるプロジェクトのビルド環境を使います。CSS → LESSの出力を編集した場合は、LESS → CSSに切り替えてコンパイル結果を確認できます。

変換前後によくある疑問

プロジェクトに取り込む前の確認

• 変換はコード片の確認やコピーに向いています。プロジェクト全体のビルド設定、プラグイン、複数ファイルの依存関係を引き継ぐものではありません。
• LESSからCSSへのコンパイルは元の整理方法を保持する逆変換ではありません。ライセンス表記など必要なコメントは、出力に残っているか個別に確認してください。
• url(...)などの相対参照は、コードを置くファイルの場所によって意味が変わります。貼り付け先のディレクトリを基準に画像やフォントの参照先を確認してください。
• 変換に成功しても、ページの表示やカスケードが意図どおりとは限りません。特異性、ルール順、メディア条件、!importantを対象環境で確認し、公開前にプロジェクトのビルドと表示を検証してください。