入力Less

コンパイル済みCSS

Less to CSSとは？

ブラウザが理解するのはCSSであり、Lessの構文ではありません。このコンバーターはLessコードを標準CSSに変換するため、変数・ネスト・再利用可能なスタイルパターンを活用しながらブラウザ互換の出力を提供できます。

ビルドパイプラインを設定せずに素早くコンパイルしたいときに活用してください。すべてブラウザ内でローカルに実行されるため、コードはプライベートに保たれ、変換は即座に完了します。

Less to CSS コンバーターの使い方

以下のステップに従い、ブラウザ対応CSSにコンパイルしてください。各ステップはこのページの実際のボタンとパネルを使用します。

貼り付け・アップロード・サンプル読み込み

左側の入力LessパネルにLessを貼り付けるか、アップロードボタンで.lessファイルを読み込んでください。サンプルをクリックすると変数とミックスインを使った契約者カードのスタイル例を確認できます。入力例：

@primary: #2563eb;
@spacing: 12px;
.subscriber-card {
  padding: @spacing;
  .plan-badge { color: @primary; font-weight: 700; }
  &:hover { background: #eef2ff; }
}

コンパイル済みCSSを確認

右側のコンパイル済みCSSパネルに即座に出力が表示されます。変数が解決され、ネストが展開され、ミックスインが展開されます。

コピーまたはダウンロード

コピーでクリップボードにコピー、またはダウンロードで.cssとして保存できます。クリアで最初からやり直せます。コンパイル処理はすべてブラウザ内で実行されます。

Less to CSS コンバーター