cssをless.cssに変換するツールはありますか?


21

かなり大きなCSSファイルがありますが、それをもっと小さくしたいです。CSSを書いたとき、less.cssを知りませんでしたが、今でも古いCSSを使用したいと思っています。

自動的に変換するのに役立つツールはありますか?


以下の私の編集を参照してください。
-fatnjazzy

@Simone Carlettiの応答を確認し、実際に少し質問している内容を拡大してください。ファイルの名前を変更する以外に、実際の「変換」は必要ない場合があります。
蘇」

興味深いですが、CSSファイルのサイズを小さくするために33KBのJSコード(less.js)を追加する価値があるのか​​と思っています。
マルコデマイオ

1
私は明らかにJavaSciptコンパイラを使用していません。CSSのサイズは、私がそれを使用する理由ではありません。保守性が理由です。:)
js-coder

回答:



15

実際、LESSでの作業を開始するのに変換ツールは必要ありません。LESS構文はCSSと下位互換性があります。CSSファイルも有効なLESSファイルであることを意味します。

CSSを取得し、LESSファイルに名前を変更するだけです。次に、変更とともにLESS固有の機能を使用します。ファイルを更新するほど、LESS機能を使用できるようになります。

SCSSと10個のCSSファイルを持つ非常に大きなプロジェクトでも同じことをしました。すべてのCSSをSCSSで書き換えることはほとんど不可能でした(そして時間の浪費です)。名前を変更しただけで、CSSファイルで作業するたびに、コードの小さなリファクタリングを実行して、ミックスインや変数などを活用しました。


これは本当に良い点をもたらします。これまでの回答は、現在のファイルをLESSワークフローへの切り替えで使用できるかどうかだけでなく、質問の「変換」部分、ミックスインなどに焦点を当てているようです。
Su

6

少なくとも見ましたか?CSSの変換はLessifyよりもはるかに優れています。特に、Lessifyはクラスをあまり最適化しません。ブラウザのリセットを生成されたすべてのミックスインにコピーし、冗長な属性を作成しました。まだ実験段階にあることは明らかです。どちらのユーティリティもセマンティクスを決定できないため、値を式、変数、またはパラメーターミックスインに変換できません。

最小化は最適化のより良い仕事をし、より機能的であるようです。疑似クラスも処理します:

http://toki-woki.net/p/least/

これらのツールは、大規模な既存のCSSファイルを操作するのに最適です。CSSをLESSに変換するために推奨する手順は次のとおりです(元のCSSファイルのコピーを必ず保持してください)。

  1. 複数の追加CSSファイルを使用している場合は、それらを1つのCSSファイルにマージします。これにより、すべてが一緒にLESSiedおよび最適化されます。

  2. オンラインCSSクリーニングユーティリティを使用して、結果のCSSコードを実行します。cleancssで良い結果が得られました:http ://www.cleancss.com/ 。これにより、LESSコンバーターで検出されない可能性のある余分で冗長なマークアップが削除されます。

  3. CSSファイルにある@Mediaとスタイルリセットを削除します。問題が発生したり、冗長性が生じる可能性があります。リセットを別のファイルに保存することをお勧めします。

  4. 結果のCSSファイルをLeastに貼り付けて、獣を見ます。

  5. リセットと@screenを再導入します。

  6. これで完了です。各属性を調べて、リファクタリングの適切な候補を見つけ、それらをLESS変数と式に変換します。CSSの色とフォントの属性は、最も簡単に除外できます。単純なグローバル検索と置換は正常に機能します。最後に、単一のファイルをより小さな論理ファイルに分割するかどうかを決定できます。このプロセスにより、ファイルが別の方法で再編成される場合があります。

私はLeastの著者ではなく、同様のツールを探している人であり、それを世界に伝えることにしました。


それらのコンバーターは理解できません@importか?@importLESSファイルがコンパイルされると、LESSはステートメントを解析し、すべてのスタイルシートを単一のCSSに統合できると思いました。きちんと整理されたすべてのCSSを1つの巨大なスタイルシートにダンプしてLESSに変換することは、保守性のために一歩後退するようです。
Lèseはmajesté

これらはありますが、これらのツールはオンラインで存在するため、外部スタイルシートにアクセスできないようにテキストフィールドにカットアンドペーストする必要があります。
ジョエルロジャース

ああ、私は実際にリンクをクリックしませんでした。私はそれらがデスクトップツールだと思っていました。それは理にかなっています。
Lèseはmajesté

5

コンバータが多くのコードで何をしたいのかを知る方法はないと思います。

たとえば、どの変数を使用したいかは必ずしもわかりません。または、ミックスインまたは関数を生成する方法。

これは手動で行う必要があると思います。


同意した。ここでは、コンピューターがあまり適していないというある程度の推測と知識が必要です。いくつかのタスクを自動化することができ(@dotwebのリンクを参照)、色の値などを1つの変数に統合することもできますが、それはおそらくそれです。
Su

ええ、しかし、LESSからCSSへの変換は1対1の変換なので、理論的には、CSSから最適化されたLESSコードを作成できるアルゴリズムが存在します。誰かがそれを書くだけです。
trusktr

コンピューターがセレクターを収集してグループ化し、ネストするのは簡単なので、ミックスインはどちらの方法でも使用できます。幸いなことに、これは変換の最も退屈な部分であり、これは計算可能です(私の答えを参照)。とにかく、CSSのカスケードの性質を考えると、元のCSSとは異なるレンダリングになる場合があります。変数と式は不可能です。コンピューターは意図や意味を判断できません。コンピューターはどのようにしてその幅を理解できますか?コンバーターが色とフォントを変数に変換することは可能です。
ジョエルロジャース

@ JoelRodgers、CSSのカスケード性が「逆コンパイラー」にバグがあることを意味するのはなぜですか?(明らかに、逆コンパイラはバグがあるかもしれませんが、原則として、用語の並べ替えがセマンティクスを変更するかどうかを見分けるのは難しくありません)。
ピーターテイラー

クラスの宣言と属性について話しています。まったく同じ順序で宣言する必要があります。そうしないと、結果が異なります。悪い間違い、私はミックスインではなくネストされたルールを意味しました。
ジョエルロジャース

3

検索と置換はどうですか。

あなたが持っている場合color:#ffffffに変更したい場合@color

単に検索するcolor:#ffffffcolor : #ffffff、に置き換えてください@color

私は通常、これらのツールを信頼していません。

または、それを処理する非常に単純なPHPスクリプトを作成できます。

更新1
または、http://nex-3.com/posts/96-scss-sass-is-a-css-extensionを使用できます。これはlessに似ており、コンバーターツールがあります。


うん、私はすでにそれについて考えました。しかし、それはかなり大きなファイルなので、確認したいのですが、これが最も簡単な方法です。;)ミックスインなどについて考えてみて

または、それを処理する非常に単純なPHPスクリプトを作成できます。
-fatnjazzy

1
純粋なCSSをLESSミックスインの使用に確実に変換するツールを見つけることはできません。
アレックス

あなたが正しいです。自動変数と混合は意味がありません。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.