かなり大きなCSSファイルがありますが、それをもっと小さくしたいです。 CSSを書いたとき、less.cssを知りませんでしたが、今でも古いCSSを使用したいと思っています。
自動的に変換するのに役立つツールはありますか?
私は実際に今何かを見つけました: http://leafo.net/lessphp/lessify/
基本的なフォーマットを実行します、例えば:
#header {
/* ... */
}
#header p {
/* ... */
}
に
#header {
/* ... */
p {
/* ... */
}
}
実際、LESSでの作業を開始するのに変換ツールは必要ありません。 LESS構文はCSSと下位互換性があります。 CSSファイルも有効なLESSファイルであることを意味します。
CSSを取得し、LESSファイルに名前を変更するだけです。次に、変更とともにLESS固有の機能を使用します。ファイルを更新するほど、LESS機能を使用できるようになります。
SCSSと10個のCSSファイルを持つ非常に大きなプロジェクトでも同じことをしました。すべてのCSSをSCSSで書き換えることはほとんど不可能でした(そして時間の浪費です)。名前を変更しただけで、CSSファイルで作業するたびに、コードの小さなリファクタリングを実行して、ミックスインや変数などを活用しました。
少なくとも見ましたか? CSSの変換はLessifyよりもはるかに優れています。特に、Lessifyはクラスをあまり最適化しません。ブラウザのリセットを生成されたすべてのミックスインにコピーし、冗長な属性を作成しました。まだ実験段階にあることは明らかです。どちらのユーティリティもセマンティクスを決定できないため、値を式、変数、またはパラメーターミックスインに変換できません。
最小化は最適化のより良い仕事をし、より機能的であるようです。疑似クラスも処理します:
これらのツールは、大規模な既存のCSSファイルを操作するのに最適です。 CSSをLESSに変換するために推奨する手順は次のとおりです(元のCSSファイルのコピーを必ず保持してください)。
複数の追加CSSファイルを使用している場合は、それらを1つのCSSファイルにマージします。これにより、すべてが一緒にLESSiedおよび最適化されます。
オンラインCSSクリーニングユーティリティを使用して、結果のCSSコードを実行します。 cleancssで良い結果が得られました: http://www.cleancss.com/ 。これにより、LESSコンバーターで捕捉されない可能性のある余分で冗長なマークアップが削除されます。
CSSファイルにある@Mediaとスタイルリセットを削除します。問題が発生したり、冗長性が生じる可能性があります。リセットを別のファイルに保存することをお勧めします。
結果のCSSファイルをLeastに貼り付けて、獣を見ます。
リセットと@screenを再導入します。
これで完了です。各属性を調べて、リファクタリングの適切な候補を見つけ、それらをLESS変数と式に変換します。 CSSの色とフォントの属性は最も簡単に除外できます。単純なグローバル検索と置換は正常に機能します。最後に、単一のファイルを小さな論理ファイルに分割するかどうかを決定できます。このプロセスにより、ファイルが別の方法で再編成される場合があります。
私はLeastの著者ではなく、同様のツールを探している人であり、それを世界に伝えることにしました。
コンバータが多くのコードで何をしたいのかを知る方法はないと思います。
たとえば、どの変数を使用したいかは必ずしもわかりません。または、ミックスインまたは関数を生成する方法。
これは手動で行う必要があると思います。
検索と置換はどうですか。
color:#ffffff
があり、@color
に変更する場合
color:#ffffff
またはcolor : #ffffff
を検索し、@color
に置き換えてください。
私は通常、これらのツールを信頼していません。
または、それを処理する非常に単純なPHPスクリプトを作成できます。
アップデート1:
または、 http://nex-3.com/posts/96-scss-sass-is-a-css-extension を使用できます。変換ツール。
このサイトを試してください: css2less.cc
入力時にCSSをLESSに変換します。