CSSをLessに変換
CSSをLess構造に変換
CSS入力
変換済みLess
CSSをLessの例
Lessは変数、ネスト、ミックスインをCSSに追加します。プレーンCSSをLessに変換するとネストで再構成されます。例：
変数とネストされたセレクター
CSS入力：
変換済みLess：
上のサンプルでさらにサンプルデータを読み込めます。
CSSをLessとは？
Lessは変数、ネスト、ミックスインをCSSに追加します。プレーンCSSをLessに変換するとネストで再構成されLess機能の準備ができます。このツールはCSSをパースしてLess風の構造を出力します。W3C CSS仕様がソースを定義しています。
変換は完全にブラウザ内で行われます。サーバーには何も送信されません。出力は有効なLessです。逆の変換（LessをCSSに）にはLessをCSSにを。SCSSにはSCSSをCSSにを使用してください。
このツールの使い方
CSSを貼り付けまたはアップロード
CSSをコピーして左のエディターに貼り付けます。アップロードをクリックして.cssファイルを読み込むこともできます。サンプルボタンでサンプルデータを読み込みます。無効なCSSはエラーを表示します。
Less出力を確認
右のパネルに変換されたLessが表示されます。構造が許せばセレクターがネストされます。変換後に変数やミックスインを手動で追加できます。
コピーまたはダウンロード
コピーまたはダウンロードを使用してください。確認にはLessをCSSにでLessをコンパイルしてください。まずCSSをフォーマットするにはCSSフォーマッターを使用してください。
CSSをLessが役立つ場面
プレーンCSSからLessへのプロジェクト移行時、またはBootstrap 3やAnt DesignなどのLessベースのフレームワークに統合する場合、この変換が役立ちます。
代わりにSCSSにはCSSをSCSSにを。ベンダープレフィックスにはCSSプレフィクサーを使用してください。
よくある質問
変数やミックスインを追加しますか？
コンバーターは構造（ネスト）に焦点を当てています。繰り返し値を自動で変数に抽出しません。必要に応じて手動で追加してください。
データはプライベートですか？
はい。変換は完全にブラウザ内で行われます。データはサーバーに送信されません。
ネストはどのように機能しますか？
ツールはセレクター間の関係からネストを推測します。複雑なセレクターはフラットのままの場合があります。
CSSをLessとCSSをSCSSの違いは？
どちらもプリプロセッサ構文を出力します。プロジェクトに合わせて選択してください。
出力をコンパイルできますか？
はい。LessをLessをCSSにに貼り付けてコンパイル・確認してください。
関連ツール
Less：lesscss.orgとLess使用法。W3C CSSとMDN CSSがソース形式を定義。