2013年4月11日CSSを構造的に書こう!「LESS」を使う為の準備はとても簡単!前々からLessとSassについては知っていたのですが、ようやく試す事ができました。CSSをより便利に使えるLessやSassは使わないのはもったいない。今回は簡単に導入できそうなのでLessに挑戦してみます。LESSをインストール!Lessってなんだ?Less(レス)ってなんだろうというアナタ!他のサイトで事細かに説明されていますのでこちらを見てください!ASCII.jp:CSSの記述が3倍速くなる「LESS」の使い方CSSの言語自体を拡張し、CSSには存在しない機能を追加するものです。難しくとらえずにCSSにプログラミングの要素が加わって直感的に書ける様になったくらいの気持ちで始めるといい気がします。変数が出てきますのでphpやjavascriptを少し習得している方はLessを抵抗なく使えると思います。Lessを使える様にしよう!Lessでの記述を行う為にファイルの準備をしていきます。functions.公式サイトからless.jsをダウンロードしてheadタグ内から読み込みます。src="common/js/less.js"></script>[/javascript]拡張子がlessのファイルを用意してlinkタグで読み込みます。通常のCSSならばrel="stylesheet"になるのですが、lessファイルはrel="stylesheet/less"としないと動いてくれません。この2つの項目さえしっかりとやればlessの導入は完了です。あとは通常のCSSと同じように扱えます。このままですとブラウザでの確認をする際にサーバサイドでないとcssが反映されません。xamppやmampのようなアプリを使ってローカルサーバで確認をしていきましょう。2でlessで作業できるようにしようless.jsを読み込むとlessの記述が使えるのですがエディターへの対応も忘れずに行いましょう。2でLessに関するパッケージは画像の通り。LESSLESS-buildLess2CssCSSLess(ish)4つのパッケージがどのような役割なのかを調べてみました。LESS記述したコードをハイライトしてくれます。間違った記述がある場合、シンタックスエラーを出してくれるので制作の際に強い味方になってくれます。LESS-buildビルド機能の強化パッケージです。bで.lessファイルを.cssに変えてくれます。コンパイルが必要なら入れておいても良さそうです。node.jsが必要のようです。Less2Csslessファイルを保存すると自動的に.cssファイルを生成してくれます。コンパイルが必要な場合、LESS-buildよりLess2Cssの方が便利に使えそうです。CSSLess(ish)日本語の情報がなかったので詳しくはわかりませんでした。css.きっといい感じにlessを使えますよ的なことが書いてあるに違いない。情報がないのでインストールは保留。LESSをインストール!上記4つの中でLESSは必須ですね。勉強の味方「ドットインストール」でlessについて勉強中です。LESSをインストール。LESSの項目が追加されました。再起動をするとタグのハイライトが反映されます。この状態で間違った記述があるとこんな風にシンタックスエラーを出してくれます。undefined@h1izeとか何言っちゃてんの?そんなのねぇし!......てか、16行目を直せば動く様になるし......と言った具合にツンデレ気味にエラー箇所を教えてくれます。ちなみに入力補助はないようです。lighten、darkenを入力してみたのですが補助してくれませんでした。いった所での細かい補助が欲しいですね。全部打ってからハイライトしてくれるのもありがたいのですが、入力補助があると作業スピードが飛躍的に上がりますからね。Lessではないですが、CSSでもtext-shadowの入力補助がないのも気になります。何か設定が必要なのか...?他のパッケージは自動でコンパイルしてくれるものだったので今回は見送ります。lessのまま、サーバにアップすると表示時間がかかってしまったりとコストパフォーマンスが悪くなるそうです。習作の為に使いますのでless.jsで使っていきたいと思います。実際にサーバにアップする際にはコンパイルして運用したいと思います。douraku.sw2x.com。