2014年7月18日

CSSの代わりのに使うLessはこう使おう


 以前、Lessについての記事を書いたと思います。 CSSを便利に解りやすく記述できる言語(?)です。 何が便利か簡単に説明すると、スタイルの記述を入れ子にできたり、簡単な計算や変数が使えます。関数的な使い方もできます。

 これが一番いいと思ったのは、lessのファイルをCSSのようにHTMLに読み込ませて、lessをコンパイルするためのJavaScriptも読み込ませると、less手動でコンパイルしなくても、自動的にコンパイルしてくれます。

 他にも、SCSSなどCompass等というのがあります。 ですが、コンパイルするのに、Rubyの環境を準備するなど、しなければならないことが沢山あります。

 このJavaScriptで自動的にコンパイルしてくれるのは便利なのですが、やはり、マシンスペックに依存して遅く感じていました。 やはり、CSSにコンパイルしてからやったほうが良いです。コメントや余分な改行や、スペースを削除したほうが読み込み時間も短くなります。
でも、lessを変更するたびに毎回手動でコンパイルするのも、面倒臭かったり、忘れて新しいスタイルが適用されなかったりします。

 そ・こ・で、WinLess(http://winless.org/)というツールに出会いました。
GUIでファイルをしてすることで、簡単にコンパイルをしてくれるのですが、秀逸なのがフォルダを指定しておくことで、そのフォルダ内のlessファイルが変更されると自動的にコンパイルしてくれます。
 このファイルを保存すると自動的にコンパイルしてくれるというのはとても便利です。
言う事無しです。

 ですが、ですがっ!
現在のlessのバージョンは、1.7.3であり、WinLessは、1.6です。
 WinLessは、ちゃんとlessのバージョンを確認して、新しいlessがリリースされていると「バージョンアップする?」って聞いてきます。
 「するっ!」って思って、バージョンアップすると、ちゃんと1.7.3にバージョンアップ(WinLessを管理者モードで起動しておく必要があります)してくれます。

 ですが、ですがっ!
lessを1.7.3にバージョンアップすると、コンパイルしてくれなくなってしまいます。
何が問題わかりませんが、正常動作していません…。
ちょっと調査が必要です。

 なので、今のところ、バージョン1.6で運用しています。

誰が、答え持ってる人いましたら、ご連絡お願います。


気になること

冒頭で、毎回コンパイルされるから遅いと書きましたが、もしかすると、コンパイルした結果は、ブラウザのlocalStrageに保管されてるかもしれません(ブラウザの開発ツールを見たら、沢山残っていたので…)。
 で、なぜ、遅いと感じた(毎回コンパイルされている)かというと、lessファイルや、JavaScriptの読み込みでキャッシュを使わないようにするために、ファイル名の後ろに「?201407181030」などと文字列を付けていたので毎回コンパイルが発生していた可能性があります。
 本番環境では、ファイル名の後ろに付ける文字列は、リリースバージョン等になるので、毎回コンパイルされることはないかもしれません。
 これも、調査が必要です。

0 件のコメント:

コメントを投稿