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