コンテンツへスキップ

Lessフォーマッター

このLess FormatterでLessスタイルシートをフォーマットできます。Lessコードを貼り付けると、ツールが変数、ネストされたルール、パラメーター付きミックスイン、ミックスイン呼び出し、ガード、関数、メディアクエリを、2つのスペースによるインデント、宣言ごとの改行、コロンとカンマの後の一貫したスペースで整えます。ミックスインのパラメーターのデフォルト値は簡潔なまま保たれるため、フロントエンド開発者はコンパイラーを実行せずに読みやすいLessを作成できます。

リセット

よくある質問

Less Formatterはどのように動作しますか?

波括弧、セミコロン、コロン、文字列、コメントなどのトークンとしてスタイルシートを読み取り、それらをもとにレイアウトを再構築します。開き波括弧ごとに2つのスペースでインデントされたブロックが始まり、各宣言は独立した行になります。

変数はどのようにフォーマットされますか?

@color: #333;などの変数宣言では、コロンの後にスペースが入り、セミコロンで終わります。値の中の変数参照は記述どおりに保持されます。

パラメーター付きミックスインはどのように処理されますか?

ミックスインのパラメーターを囲む括弧内ではコロンが値に隣接したままになるため、.mixin(@size:10px)のデフォルト値は簡潔な形で保たれます。引数間のカンマの後には1つのスペースが入ります。

ミックスイン呼び出しは独立した行に保たれますか?

はい、.mixin(5px);や.bordered;などの呼び出しはセミコロンで終わり、ルール内の独立した行に配置されます。ネストされたセレクターと&:hoverルールは1段深くインデントされます。

関数や演算子は変更されますか?

darken(@color, 10%)などの関数では、各カンマの後にスペースが入ります。また、プラス記号の両側にもスペースが入るため、1px+2pxは1px + 2pxになります。when (@a > 0)などのガードはセレクター行に保持されます。

このツールはLessをコンパイルしたりチェックしたりしますか?

いいえ、CSSへのコンパイルや構文検証は行わないため、未完成のスニペットもフォーマットできます。エラーの確認とCSSの生成には、Lessコンパイラーをお使いください。

コメントは保持されますか?

はい、// の行コメントは保持され、その行の終わりになります。次のコードはその下から始まります。ブロックコメントも元の位置に保持されます。

インデントは調整できますか?

いいえ。フォーマッターは常に半角スペース2つを使い、設定はありません。そのため、同じスタイルシートからは常に同じ結果が生成されます。

出力がlessとしてコードフェンスで囲まれているのはなぜですか?

結果はlessと指定されたMarkdownコードブロックとして返され、Markdownでシンタックスハイライトされます。.lessファイルに使う場合は、フェンスの間の行をコピーしてください。

スタイルシートのサイズ上限はどれくらいですか?

1回につき最大5 MBです。それを超える入力はメッセージとともに拒否されます。出力はCode FormatterのLessオプションと同じです。

OneClick Proについて

OneClick Proは、日々の作業に役立つ150以上のウェブツールを集めた無料コレクションです。画像や単位の変換、コードの整形と検証、ドメインやSEOの確認、テキスト、日付、数値の処理などに利用できます。すべてのツールは登録やサブスクリプションなしで使えます。入力した内容は結果の計算にのみ使用され、保存されることはありません。単発の作業に使える便利なツールボックスとして、または毎日使うツールをブックマークしてご活用ください。