LessからCSSへのコンパイラー

この lessからcssへのコンパイラー は、公式の Less.js エンジンを使用して、ブラウザ内で直接 Less ソースコードを標準的な CSS に変換します。フル機能のビルドパイプラインを立ち上げることなく、変数、ミックスイン、ネスト、算術演算、カラー関数、ミックスインガードなどの動作をすばやく検証したいフロントエンド開発者、デザイナー、学習者、コンテンツ制作チーム向けに設計されています。

使い方

1. Lessコードを貼り付ける: 左側のエディタに Less ソースを貼り付けるか、クイックスタートボタン（デザイントークン、ミックスインライブラリ、数学＆単位、カラー関数、ミックスインガード）のいずれかをクリックします。
2. コンパイルオプションを選択する: 出力形式（可読性の高い「展開」、ミニファイされた「圧縮」）を選択し、コードの仕様に合わせて数学モードや厳密な単位のトグルを調整します。
3. Lessをコンパイルする: Lessをコンパイル をクリックして、ブラウザ内部で公式の Less.js エンジンを実行します。ライブコンパイルを有効にしている場合は、文字を入力するたびに結果が自動的に更新されます。
4. CSSを確認する: 生成された CSS を確認し、コンパイルメトリクス（行数、出力サイズ、ルールブロック数、サイズ比率）をチェックします。必要に応じて差分表示を開いたり、サンドボックス構造のライブプレビューフレームで表示を確認したりできます。
5. コピーまたはダウンロード: ワンクリックでコンパイル済みの CSS をクリップボードにコピーするか、そのまま配置可能な .css ファイルとしてダウンロードします。

この Less コンパイラーの特長

• アニメーション表示されるコンパイルパイプライン: ソースコードが「構文解析 → 評価実行 → CSS」へと処理されていく流れを視覚的に確認できます。アクティブなステージがリアルタイムにハイライトされ、エラーが発生した場合は該当箇所が赤くマークされます。
• 並行差分表示（ディフビュー）: 未加工の CSS 表示から、Less と CSS を左右に並べたレイアウトへ切り替えることができます。Less の各機能（変数、ミックスイン、数学、カラー関数）がどの CSS ルールを生成したかを一目で比較可能です。
• 厳選された5つのスタート用スニペット: 各スニペットは異なる Less の概念（トークン、ミックスイン、数学、カラー関数、ミックスインガード）をターゲットに設定しているため、事前のセットアップコードを書くことなく即座に学習や比較を開始できます。
• スマートな警告（インラインチップ）: ブラウザ上で @import が使用された場合や、Less 4 数学モードにおいて括弧のない除算が含まれている場合、または本番環境でベンダープレフィックスが必要となる可能性のあるプロパティを検出した際に、リアルタイムでヒントが表示されます。
• 隔離されたサンドボックスプレビューフレーム: コンパイルされた CSS は、完全に分離された iframe の内部にのみ適用されるため、MiniWebtool のデザインを崩すことなく、安全かつ視覚的に表示の正常性を確認できます。
• 比率付きコンパイルメトリクス: 出力サイズを表示するだけでなく、元の Less ソースと組み合わせた圧縮比率なども算出されるため、圧縮モードの効果やリファクタリングによる影響度を判断する材料として役立ちます。

Less vs SCSS vs CSS 比較表

Less の数学モードについて

Less 4 では算術演算の解析方法が変更されたため、古いコードを移行する際に予期しない挙動になることがあります。必要に応じて、オプションパネル内の 数学モード セレクターを切り替えてください。

• 括弧付き除算（デフォルト）: 除算を除くすべての計算は括弧なしで実行されますが、除算を行う場合は必ず (@base / 2) のように括弧で囲む必要があります。これにより、font: 10px/14px のようなショートハンド値における意図しない除算を防止できます。
• 常時: 従来の Less 3 の挙動です。/ を含むすべての演算子が括弧なしで実行されます。古いコードベースをそのままコンパイルしたい場合は、このモードに切り替えてください。
• 厳密: 括弧の内部にある式のみが数学演算として処理されます。完全に予測可能な算術演算を行いたい場合や、Less 側による自動推測を一切排除したい場合に適しています。

潜在的なバグの原因になりやすい、互換性のない単位同士の計算（例: 10px + 2%）をブロックしたい場合は、厳密な単位 トグルを併せて有効にしてください。

主要なサポート機能

• 変数: @radius: 14px; のように定義し、ファイル内の任意の場所で参照可能です。
• ネスト ＆ 親セレクター: &:hover や &__badge などの深い階層構造のルールに対応しています。
• ミックスイン: 再利用可能な .shadow(@color) ブロックに加え、条件付き出力を行うためのミックスインガードをサポートしています。
• カラー関数: darken()、lighten()、fade()、spin()、mix() などの豊富な関数を利用できます。
• 数学演算: 数学モードの規則に従った、単位付きの算術計算（@gap * 1.5、@radius - 4px など）を処理します。
• ループ ＆ 再帰: 再帰的なミックスインを記述して、ユーティリティクラスやグリッドカラムを自動生成できます。
• 各種関数: unit()、lightness()、extract()、length() をはじめとする、Less の標準関数スイートに完全対応しています。

ブラウザ上でのコンパイルにおける制限事項

ブラウザ環境でのコンパイルは、迅速なコード検証、学習、プロトタイピング、コードレビューなどに非常に便利ですが、ローカルのファイルシステムへ直接アクセスすることはできません。そのため、ローカルのパーシャルファイルを指定している @import 文はエラーになります。該当するコードをテストする際は、参照先となるパーシャルの内容をエディタ上のコード上部に直接貼り付けてください。本番リリース用には、ベンダープレフィックスの付与、完全な @import の解決、ソースマップ、およびバンドラー用に最適化されたミニファイが行われる、通常のビルドパイプラインを実行することを推奨します。

主なユースケース

• コードの移行（マイグレーション）: Bootstrap 3 や古いデザインシステムからレガシーな Less コードを貼り付け、生成される CSS を確認しながら移植設計を行う。
• 技術の学習: プリセットを切り替えながら、個々の Less の概念（数学演算、ミックスイン、ガード、カラー関数）がプレーンな CSS にどのようにマッピングされるかを視覚的に学ぶ。
• コードレビュー: プルリクエスト（PR）をマージする前に、Less の変更が意図通りの CSS 出力を生成するかどうかを手軽に確認する。
• ドキュメント作成: ブログ記事、社内 Wiki、またはコンポーネントの引き継ぎ資料用に、サンプルとなる CSS をサクッと生成する。
• デバッグ作業: 複雑なビルド環境から問題のある Less ルールだけを切り離してテストし、バグの原因が自身のコードにあるのか、あるいはツールチェーン側にあるのかを特定する。

FAQ

LessからCSSへのコンパイラーとは何ですか？

LessからCSSへのコンパイラーは、変数、ミックスイン、ネスト、算術演算を使用するLessソースコードを、ブラウザがレンダリングできる標準的なCSSに変換します。Less自体は2009年に導入されたCSSプリプロセッサーであり、Bootstrap 3や多くのデザインシステムで広く使用されています。

コンパイラーはブラウザ内で動作しますか？

はい。公式のLess.jsエンジンがブラウザに読み込まれ、ローカルでソースをコンパイルします。通常の利用において、LessコードがMiniWebtoolのサーバーにアップロードされることはありません。

LessとSassまたはSCSSの違いは何ですか？

Lessは変数に @ プレフィックス（例: @brand）を使用し、当初はRubyで書かれ、その後にJavaScriptに移植されました。SCSSは変数に $ （例: $brand）を使用し、Sassエコシステムの一部です。どちらもネスト、ミックスイン、算術演算をサポートしていますが、構文や関数名が異なります。このツールはLessのみをコンパイルします。Sassの場合は、当サイトのSCSSからCSSへのコンパイラーをご利用ください。

Can it handle @import statements?

ブラウザでのコンパイルでは、プライベートなプロジェクトファイルを読み込むことができません。ローカルのファイルパスに依存するスニペットをテストする場合は、インポートされたLessパーシャルをエディタに直接貼り付けてください。完全な @import の解決には、ビルドパイプライン内でコンパイルを実行してください。

Why do I get a wrong result from a math expression?

Less 4では、デフォルトで括弧付きの除算と非厳密な数学が適用されます。除算を括弧で囲むか、オプションパネルで 厳密な数学 を有効にして、すべての算術演算が括弧内でのみ実行されるようにしてください。 厳密な単位 を有効にすると、 px と % のような互換性のない単位間の演算がブロックされます。

Is the compiled CSS production ready?

生成されたCSSは、簡単なテスト、プロトタイプ、学習、小さなスニペットに最適です。本番環境での使用には、ベンダープレフィックスの自動付与、ミニファイ、ソースマップ、および完全な @import の解決が行われる通常のビルドパイプラインを実行してください。

PC上のローカルな .less ファイルを直接コンパイルできますか？

はい、オプションパネルにある .less ファイルの読み込み 入力欄をご利用ください。ブラウザがローカル環境でファイルを読み込み、その内容をエディタに流し込みます。ファイルが外部サーバーにアップロードされることはありません。ファイル内で別ファイルを @import している場合は、その内容もエディタ内の該当するインポート文の上にあらかじめ貼り付けておくと正常に解決されます。