古いCSSをLESSに変換する方法

これまでの記事で、LESSの基本の大部分を取り上げました。あなたが私たちのLESSシリーズに従っているならば、私たちはこの時点であなたがすでにどのように使用するかについて良い考えを持っていると信じます 変数, ミックスイン そして 操作 以下で.

また、アプリやコンパイラを使用して、LESSを通常のCSSに変換する方法についても説明しました。しかし、どうすれば反対のことができますか。 CSSをLESSに変換する方法さて、このヒントはあなたのためです.

ツールを使う

の人気の高まりとともに CSSプリプロセッサ, このツールのように、Webデザイナーや開発者の生活をより快適にすることを主な目的とした新しいツールやアプリがいくつかあります。CSS2Less.

このツールを使用すると、通常のCSSをLESSに変換できます。それでは、試してみましょう。変換する古いファイルから次のCSS規則があります。.

 ナビ身長：40px;幅：100％。背景：＃000;ボーダーボトム：2px solid #fff;  nav ul パディング：0;マージン：0自動。  nav li display：inline;;フロート：左。 nav a color：#fff;表示：インラインブロック。幅：100ピクセル。テキストシャドウ：1px 1px 0px＃000。  nav li a 国境右：1px solid #fff;ボックスサイズ：ボーダーボックス。  nav li：最後の子a border-right：0;;ナビゲーション：ナビゲーション、ナビゲーション：アクティブ背景色：#fff;  

これが結果です.

 ナビゲーションA：ホバー、ナビゲーションA：アクティブ背景色：#fff; ナビゲーション高さ：40ピクセル。幅：100％。背景：＃000;ボーダーボトム：2px solid #fff; a 色：#fff;表示：インラインブロック。幅：100ピクセル。テキストシャドウ：1px 1px 0px＃000。  ul パディング：0;マージン：0自動。  li：最後の子a border-right：0; display inline; li display：inline;フロート：左。 a border-right：1px solid #fff;ボックスサイズ：ボーダーボックス。  

上記のように、古いCSSはLESSのようにネストされています。.

制限

ただし、変換結果にはいくつかの制限もあります。古いCSSでは、この2つの宣言のように、同じ色がいくつかあります。 ボーダーボトム：2px solid #fff; そして 右ボーダー：1px solid #fff; 我々は両方の白の境界を持っています。 LESSでは、この定数値を実際には 変数.

また、入れ子になったり分離されたりしません。 擬似-* 次の規則のように、アンパサンド（＆）記号を使用 li：最後の子 そして ナビゲーションA：ホバー、ナビゲーションA：アクティブ. それらはそのまま残されているので、ルールセットをこのように単純化することができます。

 li ＆：最初の子 a ＆：hover ＆：アクティブ 

結論

現在もまだ制限があるにもかかわらず、このツールはCSSルールセットをネストするための時間を節約するのに非常に役立ちます。あとは手動で行うだけです。おそらく上記の制限があるまで 解決した.